/* Brand design tokens (brand direction E: Aurora + Gold). One source for the app, website and marketing.
   Light is the default inside GHL; dark follows the system or the [data-theme=dark] switch;
   [data-theme=whitelabel] is the neutral theme for reseller/partner branding. */

:root {
  color-scheme: light; /* native controls (selects, scrollbars) follow the theme */
  /* Brand */
  --wt-accent: #050E16;        /* midnight: buttons, links, focus (19:1 on white). No cyan in the UI. */
  --wt-accent-hover: #1A2430;
  --wt-accent-soft: #FBF1DC;   /* gold tint behind accent elements */
  --wt-gold: #D9A441;          /* premium only: agency tier, highlights */
  --wt-chart-in: #B07D22;      /* charts: customer messages (validated CVD-safe vs out) */
  --wt-chart-out: #2F5BB7;     /* charts: your messages */
  --wt-gold-ink: #7A5410;      /* gold text on light (6:1) */
  --wt-gold-soft: #FBF1DC;
  --wt-aurora: linear-gradient(90deg, #B8862E, #E8C47A); /* gold: progress and highlights */
  --wt-gold-gradient: linear-gradient(90deg, #D9A441, #F6E3B4);

  /* Surfaces and text (light) */
  --wt-canvas: #F2F4F7;
  --wt-surface: #FFFFFF;
  --wt-sunken: #F6F7F9;
  --wt-ink: #101828;
  --wt-ink-2: #344054;
  --wt-muted: #667085;
  --wt-line: #E7E9EE;
  --wt-line-strong: #D0D5DD;
  --wt-control-border: #858D9A; /* input borders and the switch off track: 3:1 on white, canvas and sunken */
  --wt-on-ok: #FFFFFF;
  --wt-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --wt-control-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --wt-night: #050E16;         /* dark surfaces, marketing */

  /* Status */
  --wt-ok: #15803D;   --wt-ok-soft: #DCFCE7;
  --wt-warn: #A15C07; --wt-warn-soft: #FEF3C7;
  --wt-bad: #B91C1C;  --wt-bad-soft: #FEE2E2;

  /* Glass (navigation only: the top bar, its menus, tooltips. Never cards, tables, forms or dialogs).
     Text on glass is tested against anything that can scroll under the bar (app/test/glassNav.test.ts). */
  --wt-glass-ink: #101828;
  --wt-glass-muted: #344054;
  --wt-glass-tint: rgb(255 255 255 / 0.76);    /* the pane at its thinnest, for the contrast test */
  --wt-glass-pane: linear-gradient(180deg, rgb(255 255 255 / 0.84), rgb(255 252 246 / 0.76));
  --wt-glass-fallback: #FCFBF8;                /* solid tint where backdrop-filter is missing */
  --wt-glass-edge: rgb(255 255 255 / 0.9);
  --wt-glass-line: rgb(5 14 22 / 0.09);
  --wt-glass-hover: rgb(5 14 22 / 0.05);
  --wt-glass-active: #FFFFFF;
  --wt-glass-active-shadow: 0 6px 14px -8px rgb(5 14 22 / 0.4), 0 0 0 1px rgb(5 14 22 / 0.06), inset 0 1px 0 #FFFFFF;
  --wt-glass-shadow: 0 14px 34px -22px rgb(5 14 22 / 0.45), 0 1px 3px rgb(5 14 22 / 0.07);
  --wt-glass-float-shadow: 0 18px 40px -16px rgb(5 14 22 / 0.4), 0 2px 6px rgb(5 14 22 / 0.08);
  /* Soft gold and slate light at the top of the page, so the bar has something to frost. Light mode only. */
  --wt-glass-backdrop:
    radial-gradient(48rem 15rem at 2% -3rem, rgb(232 196 122 / 0.55), transparent 70%),
    radial-gradient(42rem 14rem at 96% -3rem, rgb(240 214 156 / 0.6), transparent 70%),
    radial-gradient(36rem 13rem at 50% -4rem, rgb(148 163 184 / 0.32), transparent 70%);
  --wt-glass-sub: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(252 250 244 / 0.86)); /* sub-bar: light frost, no blur */
  --wt-tile: linear-gradient(160deg, #1D2B3A, #050E16 62%); /* icon tiles: the logo's midnight with a gold glyph */
  --wt-tile-glyph: #E8C47A;
  --wt-tile-edge: rgb(255 255 255 / 0.16);

  /* Type */
  --wt-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --wt-font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wt-font-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  /* Shape and depth */
  --wt-radius-sm: 8px;
  --wt-radius: 12px;
  --wt-radius-lg: 18px;
  --wt-radius-xl: 24px;
  --wt-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --wt-on-accent: #FFFFFF;
  --wt-wordmark: #050E16;       /* product name (wordmark): the icon's midnight, solid */
}

/* Dark: midnight surfaces, brighter accent for contrast, glass shows depth. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="whitelabel"]) {
    color-scheme: dark;
    --wt-accent: #D9A441; --wt-accent-hover: #E8C47A; --wt-on-accent: #050E16; --wt-wordmark: #FFFFFF; --wt-accent-soft: rgba(217, 164, 65, 0.14); --wt-chart-in: #B88530; --wt-chart-out: #5A82D2;
    --wt-gold-ink: #E8C47A; --wt-gold-soft: rgba(217, 164, 65, 0.14);
    --wt-canvas: #0E1319; --wt-surface: #161C24; --wt-sunken: #1B222C; --wt-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --wt-control-shadow: none;
    --wt-ink: #F2F4F7; --wt-ink-2: #CBD3DD; --wt-muted: #8D98A6; --wt-line: #242D39; --wt-line-strong: #34404F; --wt-control-border: #5F6E80; --wt-on-ok: #052E16;
    --wt-ok: #4ADE80; --wt-ok-soft: rgba(74, 222, 128, 0.12); --wt-warn: #FBBF24; --wt-warn-soft: rgba(251, 191, 36, 0.12);
    --wt-bad: #F87171; --wt-bad-soft: rgba(248, 113, 113, 0.12);
    --wt-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --wt-glass-ink: #FFFFFF; --wt-glass-muted: #CBD3DD; --wt-glass-tint: rgb(22 28 36 / 0.82);
    --wt-glass-pane: linear-gradient(180deg, rgb(28 36 46 / 0.86), rgb(22 28 36 / 0.82)); --wt-glass-fallback: #1A212B;
    --wt-glass-edge: rgb(255 255 255 / 0.1); --wt-glass-line: rgb(255 255 255 / 0.1); --wt-glass-hover: rgb(255 255 255 / 0.06); --wt-glass-active: rgb(255 255 255 / 0.12);
    --wt-glass-active-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.14);
    --wt-glass-shadow: 0 14px 34px -20px rgb(0 0 0 / 0.7), 0 1px 3px rgb(0 0 0 / 0.3); --wt-glass-float-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.3);
    --wt-glass-backdrop: none; /* brand rule: dark means dark, no glows or gradient backgrounds */
    --wt-tile: linear-gradient(160deg, #2C3B4D, #0B1722 62%); --wt-tile-edge: rgb(255 255 255 / 0.2);
    --wt-glass-sub: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.025));
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wt-accent: #D9A441; --wt-accent-hover: #E8C47A; --wt-on-accent: #050E16; --wt-wordmark: #FFFFFF; --wt-accent-soft: rgba(217, 164, 65, 0.14); --wt-chart-in: #B88530; --wt-chart-out: #5A82D2;
  --wt-gold-ink: #E8C47A; --wt-gold-soft: rgba(217, 164, 65, 0.14);
  --wt-canvas: #0E1319; --wt-surface: #161C24; --wt-sunken: #1B222C; --wt-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --wt-control-shadow: none;
  --wt-ink: #F2F4F7; --wt-ink-2: #CBD3DD; --wt-muted: #8D98A6; --wt-line: #242D39; --wt-line-strong: #34404F; --wt-control-border: #5F6E80; --wt-on-ok: #052E16;
  --wt-ok: #4ADE80; --wt-ok-soft: rgba(74, 222, 128, 0.12); --wt-warn: #FBBF24; --wt-warn-soft: rgba(251, 191, 36, 0.12);
  --wt-bad: #F87171; --wt-bad-soft: rgba(248, 113, 113, 0.12);
  --wt-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --wt-glass-ink: #FFFFFF; --wt-glass-muted: #CBD3DD; --wt-glass-tint: rgb(22 28 36 / 0.82);
  --wt-glass-pane: linear-gradient(180deg, rgb(28 36 46 / 0.86), rgb(22 28 36 / 0.82)); --wt-glass-fallback: #1A212B;
  --wt-glass-edge: rgb(255 255 255 / 0.1); --wt-glass-line: rgb(255 255 255 / 0.1); --wt-glass-hover: rgb(255 255 255 / 0.06); --wt-glass-active: rgb(255 255 255 / 0.12);
  --wt-glass-active-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.14);
  --wt-glass-shadow: 0 14px 34px -20px rgb(0 0 0 / 0.7), 0 1px 3px rgb(0 0 0 / 0.3); --wt-glass-float-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.3);
  --wt-glass-backdrop: none; /* brand rule: dark means dark, no glows or gradient backgrounds */
  --wt-tile: linear-gradient(160deg, #2C3B4D, #0B1722 62%); --wt-tile-edge: rgb(255 255 255 / 0.2);
  --wt-glass-sub: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.025));
}

/* White-label: neutral, no aurora or gold, so a partner's logo and color can take over (set --wt-accent). */
:root[data-theme="whitelabel"] {
  --wt-accent: #374151; --wt-accent-hover: #1F2937; --wt-accent-soft: #F1F3F5;
  --wt-gold: #6B7280; --wt-gold-ink: #374151; --wt-gold-soft: #F1F3F5;
  --wt-aurora: linear-gradient(90deg, var(--wt-accent), var(--wt-accent));
  --wt-glass-backdrop: none; --wt-tile: linear-gradient(160deg, #4B5563, #374151 62%); --wt-tile-glyph: #FFFFFF;
}