/* =========================================================================
   AURIX DEFOG — Foundations
   Colors, typography, spacing, radii, shadows, glassmorphic surfaces
   ========================================================================= */
/* ---- Webfonts (local, brand-supplied) ----------------------------------- */
@font-face { font-family: "FallingSky"; src: url("fonts/FallingSkyLight-K2EX.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "FallingSky"; src: url("fonts/FallingSkyMedium-ved9.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "FallingSky"; src: url("fonts/FallingSkySemibold-Bn7B.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "FallingSky Outline"; src: url("fonts/FallingSkyOutline-1qZ0.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: "Cabin"; src: url("fonts/CabinRegular-G0GO.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/CabinItalic-qmG1.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/CabinMedium-V72l.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/CabinMediumItalic-JE5m.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/CabinSemibold-jmp9.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/CabinSemiboldItalic-zjYX.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/CabinBold-DEDD.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/CabinBoldItalic-AE3p.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: "Alteixsans"; src: url("fonts/AlteixsansRegulardemo-E4j1n.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Berka"; src: url("fonts/BerkaLight-9YGyn.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: "ClearSans"; src: url("fonts/ClearSans-OP0p.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ClearSans"; src: url("fonts/ClearSansMedium-D8vR.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "ClearSans"; src: url("fonts/ClearSansBold-ZeAz.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* =====================================================================
     COLOR — CORE
     The brand lives on a deep night-sky base with neon-mint as primary
     and a hot-amber as the alarm/CTA accent. Each section can wash
     itself in one of the "moods" below (slide-by-slide colorways).
     ===================================================================== */

  /* Night / surface */
  --night-950: #050912;       /* deepest backdrop */
  --night-900: #0a1020;       /* page bg */
  --night-850: #0d1428;       /* card bg base */
  --night-800: #131b33;
  --night-700: #1b2542;
  --night-600: #2a365a;
  --night-500: #3a4774;

  /* Mist / light surface alt (used on enterprise dashboards & light pages) */
  --mist-50:  #f5f7fb;
  --mist-100: #eaeef6;
  --mist-200: #d6deec;
  --mist-300: #aab6cf;
  --mist-400: #7d8aa8;
  --mist-500: #56638a;

  /* Foreground */
  --fg-1: #ffffff;            /* primary on dark */
  --fg-2: rgba(255,255,255,0.78);
  --fg-3: rgba(255,255,255,0.58);
  --fg-4: rgba(255,255,255,0.36);
  --fg-5: rgba(255,255,255,0.18);

  --fg-on-light-1: #0a1020;
  --fg-on-light-2: rgba(10,16,32,0.72);
  --fg-on-light-3: rgba(10,16,32,0.5);

  /* Primary — Defog Mint (the "live / safe / shipping" color) */
  --mint-50:  #e8fff4;
  --mint-100: #c2ffe2;
  --mint-200: #8effc7;
  --mint-300: #5ef5ad;
  --mint-400: #34e69a;          /* primary */
  --mint-500: #18c989;
  --mint-600: #0fa372;
  --mint-700: #0c7a57;
  --mint-glow: rgba(52, 230, 154, 0.55);

  /* Alarm — Aurix Amber (CTA, alerts, "fast" accent) */
  --amber-50:  #fff5e8;
  --amber-100: #ffe1ba;
  --amber-200: #ffc77a;
  --amber-300: #ffa64a;
  --amber-400: #ff8a1f;       /* CTA */
  --amber-500: #f56b00;
  --amber-600: #c14e00;

  /* Threat / chrome accents */
  --crimson-400: #ff6b7a;
  --crimson-500: #f04050;
  --magenta-400: #d878ff;
  --magenta-500: #b148ff;
  --azure-300:   #8ed6ff;
  --azure-400:   #4ab2ff;
  --azure-500:   #1f8df0;

  /* Section "moods" (matches the slide spreads) */
  --mood-provenance:  linear-gradient(180deg, #051a14 0%, #0a3a2a 60%, #094a35 100%);   /* mint */
  --mood-zerotrust:   linear-gradient(180deg, #1a0510 0%, #45111d 60%, #5a1a26 100%);   /* peach over wine */
  --mood-speed:       linear-gradient(180deg, #1a0808 0%, #5a1a10 60%, #7a2615 100%);   /* amber on rust */
  --mood-surface:     linear-gradient(180deg, #14062a 0%, #3b1a72 60%, #5a2aa0 100%);   /* lilac */
  --mood-future:      linear-gradient(180deg, #050912 0%, #1a1430 50%, #3a1a1a 100%);   /* nebula */
  --mood-reality:     linear-gradient(180deg, #061026 0%, #0e1f48 60%, #143a6e 100%);   /* cyan + pink */
  --mood-defense:     linear-gradient(180deg, #0a0805 0%, #2a1a05 60%, #4a3010 100%);   /* warm amber */
  --mood-enterprise:  linear-gradient(180deg, #050912 0%, #0a1426 50%, #142036 100%);   /* night sky */

  /* =====================================================================
     GLASS SURFACES — the brand's signature
     Three tiers; each pairs a tint, a border, and a blur amount.
     ===================================================================== */
  --glass-tint-1:  rgba(255, 255, 255, 0.06);   /* faint */
  --glass-tint-2:  rgba(255, 255, 255, 0.10);   /* default card */
  --glass-tint-3:  rgba(255, 255, 255, 0.14);   /* hovered / lifted */
  --glass-tint-4:  rgba(255, 255, 255, 0.20);   /* master frame */

  --glass-stroke-1: rgba(255,255,255,0.08);
  --glass-stroke-2: rgba(255,255,255,0.16);
  --glass-stroke-3: rgba(255,255,255,0.28);

  --glass-blur-sm: 12px;
  --glass-blur-md: 20px;
  --glass-blur-lg: 32px;
  --glass-blur-xl: 48px;

  --glass-saturate: 140%;

  /* Inner lift — emulate the light reflection on glass */
  --glass-inner-lift: inset 0 1px 0 rgba(255,255,255,0.18),
                      inset 0 -1px 0 rgba(255,255,255,0.04);

  /* =====================================================================
     SPACING
     4px grid. Most layouts use 16/24/32/64.
     ===================================================================== */
  --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;
  --s-32: 128px;

  /* =====================================================================
     RADII — generous + organic. 24/32 are signature.
     ===================================================================== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 44px;       /* master glass frame */
  --r-pill: 999px;

  /* =====================================================================
     SHADOWS — soft, deep, and luminous.
     ===================================================================== */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-3: 0 24px 64px rgba(0,0,0,0.55);
  --shadow-4: 0 40px 120px rgba(0,0,0,0.7);

  --shadow-mint:  0 0 0 1px rgba(52,230,154,0.4), 0 8px 32px rgba(52,230,154,0.25);
  --shadow-amber: 0 0 0 1px rgba(255,138,31,0.45), 0 8px 32px rgba(255,138,31,0.30);
  --shadow-glow:  0 0 60px rgba(94,245,173,0.18), 0 0 120px rgba(94,245,173,0.08);

  /* =====================================================================
     TYPE — Families
     - Display & UI: Inter (very tight, dense, expressive)
     - Italic display: Instrument Serif (italic) — the signature accent
     - Mono / chrome: JetBrains Mono — used for labels like 60/27/<100MS>
     ===================================================================== */
  --font-display: "FallingSky", "Cabin", "Helvetica Neue", system-ui, sans-serif;
  --font-display-outline: "FallingSky Outline", "FallingSky", sans-serif;
  --font-wordmark: "Alteixsans", "FallingSky", sans-serif;
  --font-italic:  "Cabin", "Helvetica Neue", sans-serif;
  --font-body:    "Cabin", system-ui, -apple-system, sans-serif;
  --font-ui:      "ClearSans", "Cabin", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Type scale — 1920 as design width */
  --t-overline:    11px / 1.0    var(--font-mono);  /* tracking +0.18em */
  --t-eyebrow:     13px / 1.0    var(--font-mono);
  --t-body-sm:     14px / 1.5    var(--font-body);
  --t-body:        16px / 1.6    var(--font-body);
  --t-body-lg:     18px / 1.55   var(--font-body);
  --t-lead:        22px / 1.45   var(--font-body);

  --t-h6:          18px / 1.25   var(--font-display);
  --t-h5:          22px / 1.2    var(--font-display);
  --t-h4:          28px / 1.15   var(--font-display);
  --t-h3:          40px / 1.05   var(--font-display);
  --t-h2:          64px / 0.98   var(--font-display);
  --t-h1:          96px / 0.95   var(--font-display);
  --t-display:     144px / 0.9   var(--font-display);

  /* =====================================================================
     MOTION
     ===================================================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 600ms;
  --dur-5: 1200ms;

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --max-w: 1440px;
  --gutter: 32px;
  --header-h: 80px;
  --master-pad: 28px;          /* padding inside master glass card */
}

/* =========================================================================
   THEME — Day mode override
   When body[data-theme="day"] is set, EVERY token below flips to a light,
   frosted-glass-with-cerulean-and-orange palette. The block CSS reads only
   from CSS vars, so this is a single source-of-truth flip.
   ========================================================================= */
body[data-theme="day"] {
  /* Foreground inverts: dark text on light surfaces */
  --fg-1: #0a1830;
  --fg-2: rgba(10, 24, 48, 0.78);
  --fg-3: rgba(10, 24, 48, 0.58);
  --fg-4: rgba(10, 24, 48, 0.38);
  --fg-5: rgba(10, 24, 48, 0.18);

  /* Cerulean stays the primary cool */
  --azure-300: #2c98e6;
  --azure-400: #1f7ec8;
  --azure-500: #0e5a99;

  /* Cerulean spectrum used by glass tints */
  --cerulean-50:  #eaf5ff;
  --cerulean-100: #cfe7fc;
  --cerulean-200: #a3d3f7;
  --cerulean-300: #6db8ee;
  --cerulean-400: #3897dc;
  --cerulean-500: #1875b8;
  --cerulean-600: #0f5a90;

  /* Orange stays the warm punch but darkened so it reads on white */
  --amber-300: #ff9e3a;
  --amber-400: #f17a18;
  --amber-500: #d05f00;

  /* Mint stays as accent but desaturated for day */
  --mint-300: #0d9c6c;
  --mint-400: #0a8459;
  --mint-glow: rgba(13, 156, 108, 0.3);

  /* GLASS TINTS — light frosted glass, slightly tinted cool */
  --glass-tint-1: rgba(255, 255, 255, 0.42);
  --glass-tint-2: rgba(255, 255, 255, 0.55);
  --glass-tint-3: rgba(255, 255, 255, 0.68);
  --glass-tint-4: rgba(255, 255, 255, 0.62);

  --glass-stroke-1: rgba(255, 255, 255, 0.65);
  --glass-stroke-2: rgba(255, 255, 255, 0.85);
  --glass-stroke-3: rgba(255, 255, 255, 0.95);

  --glass-saturate: 180%;

  /* Inner highlight reads as a true glass top-light on white */
  --glass-inner-lift: inset 0 1px 0 rgba(255,255,255,0.95),
                      inset 0 -1px 0 rgba(31, 126, 200, 0.06);

  /* Shadows — softer, cooler */
  --shadow-1: 0 1px 2px rgba(31, 126, 200, 0.10);
  --shadow-2: 0 8px 24px rgba(31, 126, 200, 0.16);
  --shadow-3: 0 24px 64px rgba(15, 90, 144, 0.22);
  --shadow-4: 0 40px 120px rgba(15, 90, 144, 0.30);

  --shadow-mint:  0 0 0 1px rgba(13, 156, 108, 0.4),  0 8px 28px rgba(13, 156, 108, 0.25);
  --shadow-amber: 0 0 0 1px rgba(241, 122, 24, 0.5),  0 8px 28px rgba(241, 122, 24, 0.30);
  --shadow-glow:  0 0 60px rgba(56, 151, 220, 0.18), 0 0 120px rgba(56, 151, 220, 0.08);
}
html[data-theme="day"], body[data-theme="day"] {
  background: #cfe9fa;
  color: var(--fg-1);
}

/* =========================================================================
   SEMANTIC ELEMENT DEFAULTS
   ========================================================================= */
html, body {
  background: var(--night-900);
  color: var(--fg-1);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font: var(--t-h1); font-weight: 800; letter-spacing: -0.03em; }
h2, .h2 { font: var(--t-h2); font-weight: 800; letter-spacing: -0.025em; }
h3, .h3 { font: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; }
h4, .h4 { font: var(--t-h4); font-weight: 700; letter-spacing: -0.015em; }
h5, .h5 { font: var(--t-h5); font-weight: 600; letter-spacing: -0.01em; }
h6, .h6 { font: var(--t-h6); font-weight: 600; }

.display { font: var(--t-display); font-weight: 900; letter-spacing: -0.04em; }
.italic-accent {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.eyebrow {
  font: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-3);
  font-weight: 500;
}
.overline {
  font: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--fg-4);
}

p, .body { font: var(--t-body); color: var(--fg-2); }
.body-lg { font: var(--t-body-lg); color: var(--fg-2); }
.body-sm { font: var(--t-body-sm); color: var(--fg-3); }
.lead    { font: var(--t-lead);    color: var(--fg-2); }
code, .mono { font-family: var(--font-mono); }

/* =========================================================================
   SURFACES — glassmorphic reusable utilities
   ========================================================================= */
.glass-1, .glass-2, .glass-3, .glass-master {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-stroke-1);
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-2), var(--glass-inner-lift);
}
.glass-1 { background: var(--glass-tint-1); }
.glass-2 { background: var(--glass-tint-2); border-color: var(--glass-stroke-2); }
.glass-3 {
  background: var(--glass-tint-3);
  border-color: var(--glass-stroke-3);
  box-shadow: var(--shadow-3), var(--glass-inner-lift);
}
.glass-master {
  background: var(--glass-tint-4);
  border-color: var(--glass-stroke-3);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-4), var(--glass-inner-lift);
}

/* Status dot — used in the SENTINEL header style */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint-400);
  box-shadow: 0 0 8px var(--mint-glow);
  animation: pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

/* Chrome chip — the data label ◧ 60 / 27 / <100MS pattern */
.chrome-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-stroke-2);
  background: var(--glass-tint-1);
  backdrop-filter: blur(var(--glass-blur-sm));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}