/* ==========================================================================
   CyntrolX Security+ — design tokens
   Single source of truth for color, type, spacing, elevation and motion.
   Light is the base palette; dark redefines only the values that change.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand: signal teal on deep navy ---------------------------------- */
  --brand-50:  #ecfdfa;
  --brand-100: #cffaf1;
  --brand-200: #9ff3e5;
  --brand-300: #62e6d5;
  --brand-400: #2dd0be;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-800: #115e59;
  --brand-900: #134e4a;

  /* --- Accent: violet, reserved for AI / automation surfaces ------------ */
  --accent-100: #ede9fe;
  --accent-300: #c4b5fd;
  --accent-500: #7c5cff;
  --accent-600: #6a47f0;
  --accent-700: #5735d4;

  /* --- Neutrals --------------------------------------------------------- */
  --ink-950: #070b14;
  --ink-900: #0b1220;
  --ink-800: #151d2e;
  --ink-700: #22304a;
  --ink-600: #35455f;
  --ink-500: #5b6b85;
  --ink-400: #8394ad;
  --ink-300: #adbaca;
  --ink-200: #d6dee8;
  --ink-100: #e8eef4;
  --ink-50:  #f4f7fa;

  /* --- Semantic surfaces ------------------------------------------------ */
  --bg:            #f5f7fa;
  --bg-subtle:     #eef2f7;
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --surface-3:     #f1f5f9;
  --surface-inset: #f6f8fb;
  --surface-inverse: var(--ink-900);

  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --border-focus:  var(--brand-500);

  --text:        #0f172a;
  --text-muted:  #55637a;
  --text-faint:  #8b98ab;
  --text-invert: #ffffff;
  --text-link:   var(--brand-700);

  /* --- Severity scale (used by charts, badges, tables) ------------------- */
  --sev-critical: #e11d48;
  --sev-critical-bg: #fff1f4;
  --sev-high:     #f97316;
  --sev-high-bg:  #fff5ed;
  --sev-medium:   #eab308;
  --sev-medium-bg:#fefce8;
  --sev-low:      #3b82f6;
  --sev-low-bg:   #eff6ff;
  --sev-info:     #64748b;
  --sev-info-bg:  #f1f5f9;

  /* --- Status ----------------------------------------------------------- */
  --ok:      #10b981;
  --ok-bg:   #ecfdf5;
  --warn:    #f59e0b;
  --warn-bg: #fffbeb;
  --danger:  #e11d48;
  --danger-bg: #fff1f2;
  --info:    #0ea5e9;
  --info-bg: #f0f9ff;

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
               Menlo, Consolas, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  26px;
  --fs-3xl:  34px;
  --fs-4xl:  46px;

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-base:  1.6;

  --fw-normal: 450;
  --fw-medium: 530;
  --fw-semi:   620;
  --fw-bold:   700;

  /* --- Space ------------------------------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* --- Radius ----------------------------------------------------------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px;
  --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-full: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .05);
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, .16);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand-500) 26%, transparent);

  /* --- Layout ----------------------------------------------------------- */
  --sidebar-w: 244px;
  --sidebar-w-collapsed: 62px;
  --topbar-h: 56px;
  --content-max: 1480px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 110ms;
  --dur: 180ms;
  --dur-slow: 300ms;
}

/* ---- Dark theme: explicit choice ---------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #070b14;
  --bg-subtle:     #0b1220;
  --surface:       #0f1725;
  --surface-2:     #141d2e;
  --surface-3:     #1a2436;
  --surface-inset: #0c1421;
  --surface-inverse: #ffffff;

  --border:        #1f2a3d;
  --border-strong: #2c3a52;

  --text:        #e8eef6;
  --text-muted:  #94a3b8;
  --text-faint:  #64748b;
  --text-invert: #0b1220;
  --text-link:   var(--brand-300);

  --sev-critical-bg: #2a0e18;
  --sev-high-bg:     #2a1608;
  --sev-medium-bg:   #262004;
  --sev-low-bg:      #0d1c33;
  --sev-info-bg:     #171f2e;

  --ok-bg:     #062b20;
  --warn-bg:   #2a1e05;
  --danger-bg: #2a0e14;
  --info-bg:   #062033;

  --accent-100: #211a3d;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .45);
  --shadow-xl: 0 28px 68px rgba(0, 0, 0, .7);
}

/* ---- Dark theme: follow the OS unless light was explicitly chosen -------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #070b14;
    --bg-subtle:     #0b1220;
    --surface:       #0f1725;
    --surface-2:     #141d2e;
    --surface-3:     #1a2436;
    --surface-inset: #0c1421;
    --surface-inverse: #ffffff;

    --border:        #1f2a3d;
    --border-strong: #2c3a52;

    --text:        #e8eef6;
    --text-muted:  #94a3b8;
    --text-faint:  #64748b;
    --text-invert: #0b1220;
    --text-link:   var(--brand-300);

    --sev-critical-bg: #2a0e18;
    --sev-high-bg:     #2a1608;
    --sev-medium-bg:   #262004;
    --sev-low-bg:      #0d1c33;
    --sev-info-bg:     #171f2e;

    --ok-bg:     #062b20;
    --warn-bg:   #2a1e05;
    --danger-bg: #2a0e14;
    --info-bg:   #062033;

    --accent-100: #211a3d;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-lg: 0 14px 38px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .45);
    --shadow-xl: 0 28px 68px rgba(0, 0, 0, .7);
  }
}


/* ---- Always-light subtree: used for product mockups embedded in marketing pages ---- */
.force-light {
  color-scheme: light;
  --bg: #f5f7fa; --bg-subtle: #eef2f7;
  --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --surface-inset: #f6f8fb;
  --surface-inverse: var(--ink-900);
  --border: #e2e8f0; --border-strong: #cbd5e1;
  --text: #0f172a; --text-muted: #55637a; --text-faint: #8b98ab; --text-invert: #ffffff;
  --text-link: var(--brand-700);
  --sev-critical-bg: #fff1f4; --sev-high-bg: #fff5ed; --sev-medium-bg: #fefce8; --sev-low-bg: #eff6ff; --sev-info-bg: #f1f5f9;
  --ok-bg: #ecfdf5; --warn-bg: #fffbeb; --danger-bg: #fff1f2; --info-bg: #f0f9ff;
  --accent-100: #ede9fe;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .04);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}