/*
 * tokens.css — Design Token System (Staging Ground)
 * =================================================
 * Shares grid, typography, spacing, radius, and motion with the
 * dwayne.pugh personal site, but NOT its gold palette: the company
 * brand stands on its own.
 *
 * Palette "Staging → Production" (chosen Nov 6, 2026):
 *   - Amber  (#FFB020) = staging. Primary brand color: CTAs, links, highlights.
 *   - Green  (#3DD68C) = production. Proof and outcomes: stats, principles,
 *                        founder accents, healthy-status indicators.
 *   - Near-black surfaces for the SRE-dashboard feel.
 *   The brand promise in color: we take teams from amber to green.
 *
 *   Keep amber bright and yellow-leaning so it never reads as the
 *   personal site's muted gold (#C8860A).
 */

:root {
  /* -------------------------------------------------------------------
     Color: Backgrounds
  ------------------------------------------------------------------- */
  --color-bg-base:        #0B0D10;
  --color-bg-surface:     #15181C;
  --color-bg-elevated:    #1D2127;
  --color-bg-alt:         #0E1014;

  /* -------------------------------------------------------------------
     Color: Accents
  ------------------------------------------------------------------- */
  /* Staging — primary brand color */
  --color-amber:          #FFB020;
  --color-amber-dim:      #D99413;
  --color-amber-glow:     rgba(255, 176, 32, 0.12);

  /* Production — proof and outcomes */
  --color-green-bright:   #3DD68C;
  --color-green:          #2FB574;
  --color-green-dim:      #23885A;
  --color-green-glow:     rgba(61, 214, 140, 0.12);

  --color-red:            #8B3A3A;
  --color-red-dim:        #6B2A2A;

  /* -------------------------------------------------------------------
     Color: Text
  ------------------------------------------------------------------- */
  --color-text-primary:   #F5F7FA;
  --color-text-secondary: #A7B0BA;
  --color-text-tertiary:  #5C6370;
  --color-text-amber:     var(--color-amber);
  --color-text-green:     var(--color-green-bright);

  /* -------------------------------------------------------------------
     Color: Borders & Dividers
  ------------------------------------------------------------------- */
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.10);
  --color-border-strong:  rgba(255, 255, 255, 0.18);
  --color-border-amber:   rgba(255, 176, 32, 0.35);
  --color-border-green:   rgba(61, 214, 140, 0.30);

  /* -------------------------------------------------------------------
     Color: Status
  ------------------------------------------------------------------- */
  --color-status-green:   var(--color-green-bright);
  --color-status-amber:   var(--color-amber);
  --color-status-red:     #B54040;

  /* -------------------------------------------------------------------
     Typography
  ------------------------------------------------------------------- */
  --font-body:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:    0.688rem;
  --text-sm:    0.813rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  --leading-tight:   1.25;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.2em;

  /* -------------------------------------------------------------------
     Spacing
  ------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* -------------------------------------------------------------------
     Layout
  ------------------------------------------------------------------- */
  --container-max:  1200px;
  --container-pad:  var(--space-6);
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;

  /* -------------------------------------------------------------------
     Motion
  ------------------------------------------------------------------- */
  --transition-fast:   120ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;

  /* -------------------------------------------------------------------
     Z-index
  ------------------------------------------------------------------- */
  --z-base:       0;
  --z-above:      10;
  --z-nav:        100;
  --z-status-bar: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}