/* ==========================================================================
   Novaline Systems: theme tokens (Light / Dark / Auto)

   The head script in index.html sets <html data-theme="light|dark"> before
   first paint, from the saved choice (localStorage "novaline-theme") or, in
   Auto mode, from the operating-system preference. js/themes.js keeps it in
   sync afterwards. Values are copied 1:1 from the approved V2 design.
   ========================================================================== */

/* Light (default) ------------------------------------------------------ */
:root {
  color-scheme: light;
  --bg: #F7FAFC;
  --surface: #FFFFFF;
  --surface-2: #F6F9FB;
  --raised: #FFFFFF;
  --field: #FFFFFF;
  --fg: #1A2835;
  --fg-2: #34485A;
  --muted: #637481;
  --line: rgba(26, 40, 53, .1);
  --line-strong: rgba(26, 40, 53, .17);
  --line-hover: rgba(26, 40, 53, .32);
  --accent: #ADD8EA;
  --accent-ink: #2D6C89;
  --accent-soft: #E7F2F8;
  --accent-border: #C6E1EE;
  --accent-line: #8FC3DA;
  --btn-bg: #1A2835;
  --btn-fg: #F3F8FB;
  --btn-hover: #2B3F52;
  --btn-shadow: 0 10px 22px -12px rgba(16, 25, 35, .55);
  --chip-bg: #ADD8EA;
  --chip-fg: #1A2835;
  --seg-bg: rgba(26, 40, 53, .06);
  --seg-active: #FFFFFF;
  --seg-shadow: 0 1px 2px rgba(16, 25, 35, .14), 0 0 0 1px rgba(16, 25, 35, .04);
  --nav-bg: rgba(247, 250, 252, .8);
  --shadow-sm: 0 1px 2px rgba(16, 25, 35, .04), 0 4px 12px -6px rgba(16, 25, 35, .06);
  --shadow-lg: 0 2px 6px rgba(16, 25, 35, .04), 0 28px 56px -28px rgba(16, 25, 35, .22);
  --card-glow: 0 0 0 1px rgba(45, 108, 137, .12), 0 22px 44px -22px rgba(45, 108, 137, .45);
  --svc-hover-bg: #FFFFFF;
  --glow: rgba(173, 216, 234, .6);
  --grid: rgba(26, 40, 53, .06);
  --focus: #2D6C89;
  --ring: rgba(45, 108, 137, .16);
  --danger: #B42318;
  --danger-soft: #FEF1EF;
  --ring-danger: rgba(180, 35, 24, .14);
  --logo-gray: #565656;
  --layer-1: #FFFFFF;
  --layer-2: #F6FAFC;
  --layer-3: #EEF5F9;
  --layer-4: #E6F0F6;
  --ping: rgba(45, 108, 137, .32);
  --ping-0: rgba(45, 108, 137, 0);

  /* Motion tokens (shared by both themes) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-micro: 180ms;
  --t-card: 300ms;
  --t-reveal: 600ms;
}

/* Dark ----------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101923;
  --surface: #142130;
  --surface-2: #182736;
  --raised: #1E2F40;
  --field: #0F1A25;
  --fg: #F3F8FB;
  --fg-2: #D2DEE6;
  --muted: #93A5B3;
  --line: rgba(173, 216, 234, .11);
  --line-strong: rgba(173, 216, 234, .2);
  --line-hover: rgba(173, 216, 234, .36);
  --accent-ink: #ADD8EA;
  --accent-soft: rgba(173, 216, 234, .08);
  --accent-border: rgba(173, 216, 234, .24);
  --accent-line: rgba(173, 216, 234, .5);
  --btn-bg: #ADD8EA;
  --btn-fg: #101923;
  --btn-hover: #C6E5F2;
  --btn-shadow: 0 10px 26px -12px rgba(173, 216, 234, .42);
  --chip-bg: #101923;
  --chip-fg: #ADD8EA;
  --seg-bg: rgba(173, 216, 234, .08);
  --seg-active: #273A4D;
  --seg-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --nav-bg: rgba(16, 25, 35, .78);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .03) inset;
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 32px 64px -32px rgba(0, 0, 0, .75);
  --card-glow: 0 0 0 1px rgba(173, 216, 234, .16), 0 24px 48px -24px rgba(0, 0, 0, .85);
  --svc-hover-bg: #182736;
  --glow: rgba(92, 156, 194, .26);
  --grid: rgba(173, 216, 234, .05);
  --focus: #ADD8EA;
  --ring: rgba(173, 216, 234, .2);
  --danger: #FF9C8F;
  --danger-soft: rgba(255, 120, 100, .1);
  --ring-danger: rgba(255, 156, 143, .18);
  --logo-gray: #A3B1BB;
  --layer-1: #1A2939;
  --layer-2: #172534;
  --layer-3: #15212F;
  --layer-4: #131E2A;
  --ping: rgba(173, 216, 234, .34);
  --ping-0: rgba(173, 216, 234, 0);
}

/* Fallback when JavaScript is unavailable (no data-theme attribute):
   follow the system setting. Keep in sync with the Dark block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #101923;
    --surface: #142130;
    --surface-2: #182736;
    --raised: #1E2F40;
    --field: #0F1A25;
    --fg: #F3F8FB;
    --fg-2: #D2DEE6;
    --muted: #93A5B3;
    --line: rgba(173, 216, 234, .11);
    --line-strong: rgba(173, 216, 234, .2);
    --line-hover: rgba(173, 216, 234, .36);
    --accent-ink: #ADD8EA;
    --accent-soft: rgba(173, 216, 234, .08);
    --accent-border: rgba(173, 216, 234, .24);
    --accent-line: rgba(173, 216, 234, .5);
    --btn-bg: #ADD8EA;
    --btn-fg: #101923;
    --btn-hover: #C6E5F2;
    --btn-shadow: 0 10px 26px -12px rgba(173, 216, 234, .42);
    --chip-bg: #101923;
    --chip-fg: #ADD8EA;
    --seg-bg: rgba(173, 216, 234, .08);
    --seg-active: #273A4D;
    --seg-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    --nav-bg: rgba(16, 25, 35, .78);
    --shadow-sm: 0 1px 0 rgba(255, 255, 255, .03) inset;
    --shadow-lg: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 32px 64px -32px rgba(0, 0, 0, .75);
    --card-glow: 0 0 0 1px rgba(173, 216, 234, .16), 0 24px 48px -24px rgba(0, 0, 0, .85);
    --svc-hover-bg: #182736;
    --glow: rgba(92, 156, 194, .26);
    --grid: rgba(173, 216, 234, .05);
    --focus: #ADD8EA;
    --ring: rgba(173, 216, 234, .2);
    --danger: #FF9C8F;
    --danger-soft: rgba(255, 120, 100, .1);
    --ring-danger: rgba(255, 156, 143, .18);
    --logo-gray: #A3B1BB;
    --layer-1: #1A2939;
    --layer-2: #172534;
    --layer-3: #15212F;
    --layer-4: #131E2A;
    --ping: rgba(173, 216, 234, .34);
    --ping-0: rgba(173, 216, 234, 0);
  }
}

/* Logo variants: dark-ink logo on Light, light-ink logo on Dark ---------- */
:root:not([data-theme="dark"]) [data-logo="dark"],
:root[data-theme="dark"] [data-logo="light"] { display: none !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) [data-logo="light"] { display: none !important; }
  :root:not([data-theme]) [data-logo="dark"] { display: block !important; }
}