/* ==========================================================================
   DENTON SECURITY / DESIGN TOKENS
   Source of truth: denton-security-style-guide.md
   Zero border-radius. 1px steel borders. Linear or sharp easing only.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     COLOR
     Accent cyan is UI chrome only (buttons, links, highlights, dividers).
     It never touches the logo.
     -------------------------------------------------------------------- */
  --color-bg:            #0A0A0B; /* near-black, primary background      */
  --color-surface:       #141416; /* charcoal, panels + cards            */
  --color-border:        #2A2A2E; /* steel gray, 1px borders + dividers  */
  --color-border-strong: #3A3A40; /* one step up, hover/emphasis borders */
  --color-text:          #F2F2F2; /* off-white, primary text  (17.9:1)   */
  --color-text-muted:    #9A9A9E; /* gray, secondary text     ( 6.7:1)   */
  --color-accent:        #00D4FF; /* electric cyan            (10.8:1)   */
  --color-accent-active: #00A8CC; /* deeper cyan, hover/active           */
  --color-alert:         #FFB020; /* amber, urgent only, use sparingly   */

  /* Ink used ON accent surfaces (dark text on cyan buttons) */
  --color-on-accent:     #0A0A0B;

  /* Low-alpha accent for focus rings, hover tints, selections */
  --color-accent-12:     rgba(0, 212, 255, 0.12);
  --color-accent-24:     rgba(0, 212, 255, 0.24);

  /* --------------------------------------------------------------------
     TYPOGRAPHY
     Headings: Space Grotesk. Body: Inter. Labels/data: JetBrains Mono.
     Sharp jumps between sizes, not fluid: 14 / 16 / 20 / 32 / 48 / 64.
     -------------------------------------------------------------------- */
  --font-heading: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Consolas", monospace;

  --text-sm:  0.875rem; /* 14px, labels, meta, buttons     */
  --text-base: 1rem;    /* 16px, body                      */
  --text-md:  1.25rem;  /* 20px, panel titles, lead        */
  --text-xl:  2rem;     /* 32px, section headings          */
  --text-2xl: 3rem;     /* 48px, page headings             */
  --text-3xl: 4rem;     /* 64px, display                   */

  --leading-tight: 1.1;  /* display + headings              */
  --leading-snug:  1.3;  /* panel titles                    */
  --leading-body:  1.65; /* body text on dark backgrounds   */

  --tracking-tight: -0.02em; /* headings (floor is -0.04em) */
  --tracking-wide:   0.08em; /* button labels               */
  --tracking-caps:   0.14em; /* uppercase eyebrow labels    */

  /* --------------------------------------------------------------------
     SPACING  (4px base, sharp steps)
     -------------------------------------------------------------------- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */

  /* --------------------------------------------------------------------
     SHAPE
     Zero radius everywhere. This token exists so the rule is explicit
     and greppable; never override it upward.
     -------------------------------------------------------------------- */
  --radius: 0;
  --border-w: 1px;

  /* --------------------------------------------------------------------
     MOTION
     Linear or sharp cubic-bezier only. No bounce, no overshoot,
     no soft ease-outs. Hovers are near-instant.
     -------------------------------------------------------------------- */
  --ease-sharp:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear: linear;

  --dur-fast:   120ms; /* hover + press feedback (100-150ms band) */
  --dur-base:   200ms; /* small state changes                     */
  --dur-reveal: 600ms; /* clip-path panel wipes                   */

  /* --------------------------------------------------------------------
     Z-INDEX  (semantic scale, no arbitrary values)
     -------------------------------------------------------------------- */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-texture: 500; /* scanline overlay, pointer-events: none */

  /* --------------------------------------------------------------------
     TEXTURE
     Scanline opacity band per style guide: 3-5%.
     -------------------------------------------------------------------- */
  --scanline-color: rgba(255, 255, 255, 0.035);
  --scanline-step: 3px;

  /* --------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------- */
  --container-max: 1200px;
  --measure: 65ch; /* body line-length cap */
}

/* ==========================================================================
   DIM THEME (experimental comparison toggle)
   Same as the dark theme in every respect except the base background —
   Ben found the near-black too high-contrast. Only bg/surface/border move
   to a softer dark grey; text, accent, and alert are left untouched, so
   they simply inherit their :root (dark) values here. Applied via
   [data-theme="dim"], set by the toggle in scripts/site.js.
   ========================================================================== */
:root[data-theme="dim"] {
  --color-bg:            #1B1B1E; /* dark grey, softer than near-black    */
  --color-surface:       #242428; /* charcoal panel, one step up from bg  */
  --color-border:        #35353B; /* steel gray, re-tuned for the lighter bg */
  --color-border-strong: #45454C;
}

/* ==========================================================================
   LIGHT THEME (experimental comparison toggle)
   Ben asked for a quick way to compare a white/black inversion against the
   locked dark theme. Same shape, spacing, and motion tokens throughout —
   only color flips. Applied via [data-theme="light"] on <html>, set by the
   toggle in scripts/site.js. Accent and alert are darkened versions of the
   dark-theme hues (not simple inverts) so text-sized use still clears
   WCAG AA 4.5:1 against a white background.
   ========================================================================== */
:root[data-theme="light"] {
  --color-bg:            #FFFFFF;
  --color-surface:       #F2F2F2;
  --color-border:        #D9D9DC;
  --color-border-strong: #BFBFC3;
  --color-text:          #0A0A0A;
  --color-text-muted:    #5C5C60; /* ~6.6:1 on white */
  --color-accent:        #007A99; /* darkened cyan,  ~4.9:1 on white */
  --color-accent-active: #005F78; /* deeper still, hover/active      */
  --color-alert:         #A15A00; /* darkened amber, urgent only     */

  /* Ink used ON accent surfaces (white text on the darker cyan) */
  --color-on-accent:     #FFFFFF;

  --color-accent-12:     rgba(0, 122, 153, 0.12);
  --color-accent-24:     rgba(0, 122, 153, 0.24);

  --scanline-color: rgba(0, 0, 0, 0.035);
}