/* ==========================================================================
   GARY LAYN — Design Tokens
   garylayn.com/src/styles/tokens.css

   Single source of truth for every visual decision on the site.
   Derived directly from the approved homepage concept.
   Every other CSS file inherits from here.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     COLOR

     Two surface modes: ink (dark) and stock (light).
     Signal is the single accent. Never introduce a color outside this list.
  -------------------------------------------------------------------------- */

  /* Ink surfaces — hero, nav, CyberRwanda band, footer, call sheet */
  --ink-0:     #17130F;   /* deepest background */
  --ink-1:     #221C15;   /* raised ink surface */
  --ink-2:     #2C241A;   /* further raised */
  --ink-line:  #3D3325;   /* borders and rules on ink */

  /* Stock surfaces — card sections, light panels */
  --stock:      #E4DCC8;  /* primary light background */
  --stock-1:    #D8CDB1;  /* slightly deeper stock */
  --stock-line: #B9AC8A;  /* borders and rules on stock */

  /* Text on ink */
  --text-on-ink:      #EDE6D3;  /* primary body text on dark */
  --text-on-ink-soft: #A79B84;  /* muted / secondary on dark */

  /* Text on stock */
  --text-on-stock:      #1D1810; /* primary body text on light */
  --text-on-stock-soft: #4A4331; /* muted / secondary on light */

  /* Signal — the single accent color, used with restraint */
  --signal:          #E8A93B;   /* pure signal (buttons on light) */
  --signal-on-ink:   #F0BE63;   /* signal on dark surfaces */
  --signal-on-stock: #8C5B12;   /* signal on light surfaces */


  /* --------------------------------------------------------------------------
     TYPOGRAPHY

     Both are system fonts — zero load time, no font flash.
     Bahnschrift: condensed grotesque, the bold display voice.
     Charter: humanist serif, the literary editorial voice.
     Cascadia Code: monospace for labels, codes, call sheet.
  -------------------------------------------------------------------------- */

  --font-display: 'Bahnschrift', 'DIN Alternate', 'Arial Narrow', sans-serif;
  --font-body:    Charter, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono:    'Cascadia Code', 'SF Mono', Consolas, 'Courier New', monospace;

  /* Type scale */
  --text-xs:   0.72rem;   /* ~11px — STOCK codes, fine print */
  --text-sm:   0.8rem;    /* ~13px — captions, mono labels */
  --text-base: 1rem;      /* 16px  — body copy */
  --text-md:   1.05rem;   /* ~17px — hero sub, card body */
  --text-lg:   1.3rem;    /* ~21px — card headings */
  --text-xl:   clamp(1.5rem, 3vw, 2.15rem);   /* section h2 */
  --text-hero: clamp(2.2rem, 5.4vw, 4.1rem);  /* h1 — fluid */

  /* Weight */
  --weight-regular: 400;
  --weight-bold:    700;

  /* Leading */
  --leading-tight:  1.02;  /* hero h1 */
  --leading-snug:   1.3;
  --leading-normal: 1.6;   /* body copy */

  /* Tracking */
  --tracking-tight:   -0.01em;  /* display headlines */
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;  /* nav links */
  --tracking-wider:    0.08em;  /* button labels */
  --tracking-widest:   0.12em;  /* eyebrows, kickers */


  /* --------------------------------------------------------------------------
     LAYOUT
  -------------------------------------------------------------------------- */

  --container:    1180px;
  --gutter:       1.5rem;
  --gutter-lg:    2.5rem;   /* applied at 900px+ */
  --section-pad:  4.5rem 0;
  --nav-height:   76px;     /* measured sticky header height on mobile, with a little buffer */


  /* --------------------------------------------------------------------------
     BORDERS & RADIUS

     Near-zero radius. This is editorial, not SaaS.
  -------------------------------------------------------------------------- */

  --radius-sm:   2px;    /* cards, nav CTA button */
  --radius-pill: 100px;  /* status badges only */
  --border:      1px solid;


  /* --------------------------------------------------------------------------
     SHADOWS
  -------------------------------------------------------------------------- */

  --shadow-card:       0 10px 28px rgba(23, 19, 15, 0.14);
  --shadow-card-light: 0 1px 3px rgba(0, 0, 0, 0.08);


  /* --------------------------------------------------------------------------
     MOTION
  -------------------------------------------------------------------------- */

  --ease:          cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 600ms;


  /* --------------------------------------------------------------------------
     Z-INDEX
  -------------------------------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-nav:     50;
  --z-overlay: 100;

}


/* --------------------------------------------------------------------------
   REDUCED MOTION
-------------------------------------------------------------------------- */

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