/* ==========================================================================
   CASTRO COGNITION // DESIGN TOKENS
   Plain CSS custom properties. No build step.
   Load order: tokens.css -> components.css -> page <style>.
   Usage rules live in /DESIGN.md. Living reference: /design-system.html
   ========================================================================== */

/* ---------- Fonts: self-hosted (CSP is font-src 'self'; Google Fonts is blocked) ---------- */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/space-mono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-mono-700.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400-italic.woff2) format('woff2')}

:root{
  /* ======================= COLOR: CORE PALETTE ======================= */
  --black:#0a0a0a;
  --ivory:#f0ece4;
  --red:#e2252b;
  --gold:#c9a84c;
  --white:#fff;
  /* restricted extensions */
  --gold-lit:#dcbc60;      /* ASCII/canvas art glow ONLY. Never for text or UI. */
  --ivory-shade:#d9d3c5;   /* wordmark scanline stripe ONLY */

  /* channels, for alpha tints and for canvas JS (read via getComputedStyle) */
  --black-rgb:10,10,10;
  --ivory-rgb:240,236,228;
  --red-rgb:226,37,43;
  --gold-rgb:201,168,76;
  --gold-lit-rgb:220,188,96;
  --white-rgb:255,255,255;
  --shadow-rgb:0,0,0;

  /* ======================= COLOR: TINT LADDERS ======================= */
  /* ivory as text */
  --ivory-45:rgba(var(--ivory-rgb),.45);
  --ivory-55:rgba(var(--ivory-rgb),.55);
  --ivory-66:rgba(var(--ivory-rgb),.66);
  --ivory-82:rgba(var(--ivory-rgb),.82);
  /* ivory as surface wash */
  --ivory-02:rgba(var(--ivory-rgb),.02);
  --ivory-035:rgba(var(--ivory-rgb),.035);
  --ivory-06:rgba(var(--ivory-rgb),.06);
  --ivory-10:rgba(var(--ivory-rgb),.10);
  /* gold as line / label */
  --gold-14:rgba(var(--gold-rgb),.14);
  --gold-22:rgba(var(--gold-rgb),.22);
  --gold-30:rgba(var(--gold-rgb),.3);
  --gold-40:rgba(var(--gold-rgb),.4);
  --gold-50:rgba(var(--gold-rgb),.5);
  --gold-60:rgba(var(--gold-rgb),.6);
  /* red as wash / line / glow */
  --red-05:rgba(var(--red-rgb),.05);
  --red-10:rgba(var(--red-rgb),.1);
  --red-28:rgba(var(--red-rgb),.28);
  --red-35:rgba(var(--red-rgb),.35);
  --red-50:rgba(var(--red-rgb),.5);
  --red-70:rgba(var(--red-rgb),.7);
  --red-85:rgba(var(--red-rgb),.85);
  --red-00:rgba(var(--red-rgb),0);
  /* black */
  --black-88:rgba(var(--black-rgb),.88);

  /* ======================= COLOR: SEMANTIC ALIASES ======================= */
  --color-bg:var(--black);
  --color-text:var(--ivory);
  --color-text-strong:var(--white);     /* display headings, primary button text */
  --color-text-soft:var(--ivory-66);    /* body copy, supporting text */
  --color-muted:var(--ivory-45);        /* footnotes, meta, footer. Fails AA below 18px: see DESIGN.md */
  --color-accent:var(--red);            /* action + alarm: CTAs, prompts, the one hot word */
  --color-highlight:var(--gold);        /* structure + meaning: labels, ticks, hovers */
  --color-border:var(--gold-22);
  --color-border-faint:var(--gold-14);
  --color-border-mid:var(--gold-30);
  --color-border-strong:var(--gold-50);
  --color-border-accent:var(--red-50);
  --color-surface:var(--ivory-02);
  --color-surface-hover:var(--ivory-035);
  --color-surface-focus:var(--ivory-06);
  --color-surface-nav:var(--black-88);
  --color-selection-bg:var(--red);
  --color-selection-text:var(--white);
  --color-rule:rgba(var(--gold-rgb),.45);

  /* ======================= TYPE: FAMILIES ======================= */
  --font-display:'Bebas Neue',Impact,sans-serif;          /* headlines, buttons, numbers */
  --font-mono:'Space Mono',ui-monospace,monospace;        /* body + UI (default) */
  --font-serif:'Instrument Serif',Georgia,serif;          /* ITALIC ONLY: emphasis, leads, pull quotes */
  --weight-regular:400;
  --weight-bold:700;

  /* ======================= TYPE: DISPLAY MODULAR SCALE =======================
     Ratio 1.2 (minor third), anchored at 20px (button / lead size).
     This anchor lands within 0.3px of the site's established h2 (50) and h1 (72).
     Governs Bebas + serif. Fluid tokens below interpolate between steps. */
  --type-ratio:1.2;
  --step-0:20px;
  --step--1:calc(var(--step-0) / var(--type-ratio));   /* 16.67 */
  --step-1:calc(var(--step-0) * var(--type-ratio));    /* 24 */
  --step-2:calc(var(--step-1) * var(--type-ratio));    /* 28.8 */
  --step-3:calc(var(--step-2) * var(--type-ratio));    /* 34.56 */
  --step-4:calc(var(--step-3) * var(--type-ratio));    /* 41.47 */
  --step-5:calc(var(--step-4) * var(--type-ratio));    /* 49.77 */
  --step-6:calc(var(--step-5) * var(--type-ratio));    /* 59.72 */
  --step-7:calc(var(--step-6) * var(--type-ratio));    /* 71.66 */
  --step-8:calc(var(--step-7) * var(--type-ratio));    /* 86 */
  --step-9:calc(var(--step-8) * var(--type-ratio));    /* 103.2 */
  --step-10:calc(var(--step-9) * var(--type-ratio));   /* 123.8 */
  --step-11:calc(var(--step-10) * var(--type-ratio));  /* 148.6 */
  --step-12:calc(var(--step-11) * var(--type-ratio));  /* 178.3 */

  /* fluid roles (min step, viewport rate, max step) */
  --text-lead:clamp(var(--step--1), 2vw, var(--step-0));        /* serif leads, close lines */
  --text-xl:clamp(var(--step-0), 2.4vw, var(--step-1));         /* gate names, featured quotes */
  --text-2xl:clamp(var(--step-0), 2.8vw, var(--step-2));        /* big pull quote, compact h2 */
  --text-h2:clamp(var(--step-2), 4.6vw, var(--step-5));
  --text-h1:clamp(var(--step-3), 6.4vw, var(--step-7));
  --text-hero:clamp(var(--step-4), 6.6vw, var(--step-8));       /* media-kit hero, stat wall */
  --text-hero-lg:clamp(var(--step-4), 8vw, var(--step-8));      /* centered one-line heroes */
  --text-wordmark:clamp(var(--step-5), 9.2vw, var(--step-10));
  --text-mega:clamp(var(--step-6), 14vw, var(--step-11));       /* 404 */
  --text-counter:clamp(var(--step-9), 22vw, var(--step-12));    /* audit tally + timer */

  /* ======================= TYPE: MONO UI RAMP =======================
     Linear 1px ramp. At 10-15px a modular ratio is too coarse for mono UI. */
  --text-2xs:10px;   /* plates, affiliate note, mobile footer */
  --text-xs:11px;    /* labels, eyebrows, footnotes, nav CTA */
  --text-sm:12px;    /* terminal lines, ticker, captions */
  --text-md:13px;    /* dense rows, checkbox labels */
  --text-base:14px;  /* inputs, list copy, card copy */
  --text-body:15px;  /* running body text */

  /* ======================= TYPE: LINE HEIGHT ======================= */
  --leading-crush:.95;   /* one-line display: wordmark, numbers */
  --leading-tight:1.04;  /* h1, h2 */
  --leading-snug:1.4;    /* large serif quotes */
  --leading-serif:1.55;  /* serif paragraphs */
  --leading-body:1.65;   /* mono body */
  --leading-loose:2;     /* rule lists, tier tables */

  /* ======================= TYPE: TRACKING ======================= */
  --tracking-none:0;
  --tracking-tight:.03em;    /* big display */
  --tracking-snug:.06em;     /* h3 display, small caps inside numbers */
  --tracking-wide:.12em;     /* terminal lines, footnotes */
  --tracking-wider:.18em;    /* buttons, footer, meta */
  --tracking-widest:.24em;   /* labels, nav CTA, links */
  --tracking-label:.3em;     /* stat keys, plates, sublabels */
  --tracking-eyebrow:.4em;   /* section eyebrows */

  /* ======================= SPACING: 4PX SCALE ======================= */
  --space-unit:4px;
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-9:36px;
  --space-10:40px;
  --space-11:44px;
  --space-12:48px;
  --space-13:52px;
  --space-14:56px;
  --space-15:60px;
  --space-16:64px;
  --space-18:72px;
  --space-20:80px;
  --space-24:96px;
  --space-26:104px;
  --space-28:112px;
  --space-30:120px;
  --space-33:132px;

  /* layout rhythm (fluid, still on the 4px grid at both ends) */
  --gutter:var(--space-6);
  --gutter-mobile:var(--space-5);
  --gutter-fluid:clamp(var(--space-5), 4vw, var(--space-12));
  --nav-pad-x:clamp(var(--space-5), 4vw, var(--space-11));
  --section-pad-y:clamp(var(--space-16), 11vh, calc(var(--space-unit) * 29));   /* 64 -> 116 */
  --section-pad-y-wide:clamp(var(--space-14), 9vh, calc(var(--space-unit) * 25)); /* 56 -> 100 */
  --section-pad-y-mobile:var(--space-14);
  --hero-pad-top:var(--space-30);
  --hero-pad-top-mobile:var(--space-26);

  /* containers + measures */
  --container-form:560px;
  --container-list:620px;
  --container-prose:760px;
  --container-narrow:860px;
  --container-hero:980px;
  --container-footer:1100px;
  --container-wide:1160px;
  --measure-headline:13em;
  --measure-quote:28em;
  --measure-short:30em;
  --measure-tagline:36em;
  --measure-lead:38em;
  --measure-body:42em;
  --measure-wide:46em;

  /* ======================= SHAPE ======================= */
  --radius-0:0;               /* the brand is square. Everything. */
  --radius-round:50%;         /* play buttons / status dots only */
  --border-width:1px;
  --border-width-accent:2px;
  --tick-size:9px;            /* corner-tick length on .tick frames */
  --tick-opacity:.6;

  /* ======================= SHADOW / GLOW ======================= */
  --glow-red:0 0 26px var(--red-28);
  --glow-red-text:0 0 26px var(--red-28);
  --glow-ivory-text:0 0 26px var(--ivory-10);
  --focus-ring:0 0 0 2px var(--red-50);
  --shadow-crt-inset:inset 0 0 var(--space-15) rgba(var(--shadow-rgb),.6);
  --shadow-none:none;
  --blur-nav:8px;
  --opacity-disabled:.22;
  --select-arrow:6px;
  --art-opacity:.62;         /* ASCII canvas art at rest (hero accents) */
  --art-opacity-idle:.55;    /* ASCII art inside a sleeping gate */

  /* ======================= MOTION ======================= */
  --dur-fast:.15s;
  --dur-base:.2s;
  --dur-slow:.35s;
  --dur-reveal:.6s;
  --dur-blink:1.05s;
  --dur-pulse:1.6s;
  --dur-ring:2.4s;
  --dur-ticker:30s;
  --ease-standard:ease;
  --ease-wave:ease-in-out;
  --reveal-shift:18px;

  /* ======================= EFFECTS (intensity dials; limits in DESIGN.md) ======================= */
  --fx-scanline-color:rgba(var(--white-rgb),.025);   /* max .05 */
  --fx-scanline-line:1px;
  --fx-scanline-pitch:3px;
  --fx-vignette-size:130% 100%;
  --fx-vignette-y:30%;                                /* pages with centered heroes override */
  --fx-vignette-clear:58%;
  --fx-vignette-color:rgba(var(--shadow-rgb),.5);    /* max .6 */
  --fx-grain-opacity:.04;                             /* max .06 */
  --fx-grain-duration:7s;
  --fx-grain-texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fx-chroma-offset:4px;                             /* max 8px at rest */
  --fx-chroma-red-opacity:.22;                        /* max .5 at glitch peak */
  --fx-chroma-gold-opacity:.14;
  --fx-chroma-duration:3.5s;
  --fx-chroma-text-shadow:-2px 0 var(--red), 2px 0 var(--gold-60);

  /* ======================= SACRED GEOMETRY ======================= */
  --geo-stroke:1.5;          /* SVG user units at the divider's 64-unit viewBox */
  --geo-opacity:.8;
  --geo-spin:90s;            /* one full turn; stops under reduced motion */
  --geo-bg-opacity:.06;      /* max .1 behind text */
  --geo-tile:28px 48.497px;  /* flower-of-life lattice period: r x r*sqrt(3) */
  --geo-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.000 48.497'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='-14.000' cy='-24.249' r='28'/%3E%3Ccircle cx='14.000' cy='-24.249' r='28'/%3E%3Ccircle cx='42.000' cy='-24.249' r='28'/%3E%3Ccircle cx='-28.000' cy='0.000' r='28'/%3E%3Ccircle cx='0.000' cy='0.000' r='28'/%3E%3Ccircle cx='28.000' cy='0.000' r='28'/%3E%3Ccircle cx='56.000' cy='0.000' r='28'/%3E%3Ccircle cx='-14.000' cy='24.249' r='28'/%3E%3Ccircle cx='14.000' cy='24.249' r='28'/%3E%3Ccircle cx='42.000' cy='24.249' r='28'/%3E%3Ccircle cx='-28.000' cy='48.497' r='28'/%3E%3Ccircle cx='0.000' cy='48.497' r='28'/%3E%3Ccircle cx='28.000' cy='48.497' r='28'/%3E%3Ccircle cx='56.000' cy='48.497' r='28'/%3E%3Ccircle cx='-14.000' cy='72.746' r='28'/%3E%3Ccircle cx='14.000' cy='72.746' r='28'/%3E%3Ccircle cx='42.000' cy='72.746' r='28'/%3E%3C/g%3E%3C/svg%3E");

  /* ======================= LAYERS ======================= */
  --z-below:-1;
  --z-field:0;         /* full-page canvas fields */
  --z-ghost:1;
  --z-content:2;
  --z-raised:3;
  --z-fx-grain:88;
  --z-fx-vignette:89;
  --z-fx-scanlines:90;
  --z-sticky:95;
  --z-nav:100;
}

/* Motion off: durations collapse. components.css also kills every animation. */
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:0s;--dur-base:0s;--dur-slow:0s;--dur-reveal:0s;
    --reveal-shift:0px;
  }
}