/* ================================================================
   GSTVerify theme layer — gstverify.co.in colour scheme on top of the
   shared component system (style.css + css/utilities.css).

   Dark is the default (as it always was on gstverify.co.in); light is
   opt-in via the header toggle (js/theme.js sets <html data-theme>).
   Loaded AFTER style.css so these tokens win.
   ================================================================ */

/* -- Dark (default) ---------------------------------------------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Brand: gstverify orange */
  --brand:        #f0883e;
  --brand-hover:  #ffa057;
  --brand-dark:   #ffb27a;          /* used for code text / emphasis on dark */
  --brand-sky:    #ffa057;
  --brand-50:     rgba(240,136,62,.10);
  --brand-100:    rgba(240,136,62,.18);
  --brand-200:    rgba(240,136,62,.34);
  --brand-glow:   rgba(240,136,62,.28);
  --brand-grad:   linear-gradient(135deg, #ffa057 0%, #f0883e 100%);
  --navy:         #111620;
  --navy-900:     #07090d;
  --navy-800:     #0d1118;
  --navy-700:     #181e2b;
  --navy-border:  #252d3d;
  --verified:     #3ecf72;

  /* Surfaces */
  --bg:            #0a0d12;
  --surface:       #111620;
  --surface2:      #181e2b;
  --surface3:      #1c2333;
  --border:        #252d3d;
  --border2:       #1c2333;
  --border-strong: #334056;

  /* Text (ink3/ink4 lifted from #3e4d63 for WCAG AA on secondary text) */
  --ink:  #e2e8f4;
  --ink2: #9aa9bf;
  --ink3: #66768e;
  --ink4: #56657c;

  --accent:        #f0883e;
  --accent2:       #ffa057;
  --accent-soft:   rgba(240,136,62,.10);
  --accent-border: rgba(240,136,62,.34);

  /* Status */
  --green:        #3ecf72;
  --green-soft:   rgba(62,207,114,.12);
  --green-border: rgba(62,207,114,.32);
  --amber:        #f5c842;
  --amber-soft:   rgba(245,200,66,.12);
  --amber-border: rgba(245,200,66,.32);
  --red:          #f75a5a;
  --red-soft:     rgba(247,90,90,.12);
  --red-border:   rgba(247,90,90,.32);
  --blue:         #5badff;
  --blue-soft:    rgba(91,173,255,.12);
  --blue-border:  rgba(91,173,255,.32);
  --purple:       #a78bfa;
  --purple-soft:  rgba(167,139,250,.12);
  --purple-border:rgba(167,139,250,.32);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 6px rgba(0,0,0,.30);
  --shadow:    0 4px 24px rgba(0,0,0,.45);
  --shadow-md: 0 4px 18px rgba(0,0,0,.40);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.50);
  --shadow-xl: 0 24px 56px rgba(0,0,0,.60);

  /* Type: gstverify's DM Serif Display headings + DM Mono identifiers */
  --serif: 'DM Serif Display', Georgia, serif;
  --mono:  'DM Mono', 'Fira Mono', ui-monospace, monospace;
}

/* -- Light (toggle) ---------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;
  --brand-dark:    #c4621f;
  --brand-50:      #fff4ec;
  --brand-100:     #ffe3cf;
  --brand-200:     #ffd0ad;
  --navy:          #1a202e;
  --navy-900:      #10141d;
  --navy-800:      #151a26;
  --navy-700:      #232b3c;
  --navy-border:   #2e3749;
  --bg:            #f0f4fa;
  --surface:       #ffffff;
  --surface2:      #f7f9fc;
  --surface3:      #eef2f8;
  --border:        #dce3ee;
  --border2:       #e8edf6;
  --border-strong: #c5cfdd;
  --ink:  #1a202e;
  --ink2: #4a5568;
  --ink3: #66728a;
  --ink4: #8794a8;
  --accent:        #e0742a;   /* orange darkened a step for text contrast on white */
  --accent2:       #f0883e;
  --accent-soft:   #fff4ec;
  --accent-border: #ffd0ad;
  --green:  #18a957; --green-soft: #ecfdf3; --green-border: #a7f3c8;
  --amber:  #c98a04; --amber-soft: #fffbeb; --amber-border: #fde68a;
  --red:    #e0393e; --red-soft:   #fff1f2; --red-border:   #fecdd3;
  --blue:   #1f7ae0; --blue-soft:  #eff6ff; --blue-border:  #bfdbfe;
  --purple: #7c3aed; --purple-soft:#f5f3ff; --purple-border:#ddd6fe;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow:    0 4px 20px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.07);
  --shadow-lg: 0 16px 36px rgba(0,0,0,.10);
  --shadow-xl: 0 24px 48px rgba(0,0,0,.18);
}

/* -- Component fixes the token swap alone can't cover -------------- */
html, body { background: var(--bg); color: var(--ink); }
.site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(160%) blur(10px); }
.nav-dropdown-panel, .user-menu-panel { background: var(--surface); border-color: var(--border); }
input, select, textarea { background: var(--surface2); color: var(--ink); border-color: var(--border); }
input::placeholder, textarea::placeholder { color: var(--ink3); }
table th { color: var(--ink2); }
::selection { background: var(--brand-200); color: var(--ink); }
code { color: var(--brand-dark); }

/* Buttons keep white text on orange in both themes. */
.btn, .btn-primary, .nav-cta-btn { color: #fff; }

/* Logo: dark-theme and light-theme artwork */
.logo-img.dark-only  { display: block; }
.logo-img.light-only { display: none; }
:root[data-theme="light"] .logo-img.dark-only  { display: none; }
:root[data-theme="light"] .logo-img.light-only { display: block; }

/* Theme toggle button in the header */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--ink2); cursor: pointer; font-size: 1rem; line-height: 1;
  transition: border-color var(--transition), color var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* About page: founder card accent border */
.u-bl-4px_solid_accent { border-left: 4px solid var(--accent) !important; }