/* ============================================================
   PRICKLED.AI DESIGN TOKENS
   Source of truth: the live site at prickled.ai (website/index.html
   and subpages), audited 6 Aug 2026.
   Brand look: "Skyride, light-led". White leads. Palette accents only.

   Load this file FIRST, then prickled.css.
   Nothing in here paints anything. It only names values.
   ============================================================ */

:root {

  /* ---------- 1. CORE PALETTE (locked, never re-derive) ---------- */
  --white:        #FFFFFF;  /* dominant background. Always leads. */
  --navy:         #0F2740;  /* Ink Navy. Headings, dark panels, ink. */
  --baltic:       #38618C;  /* Baltic Blue. Anchor text, solid buttons. */
  --sky:          #35A7FF;  /* Cool Sky. Primary accent. NEVER body copy on white. */
  --pink:         #FD2643;  /* Prickled Red. Small pop accent, sparing. */
  --banana:       #FFE74C;  /* Banana Cream. Highlight/underline only, sparing. */

  /* ---------- 2. WORKING NEUTRALS (derived, do not invent more) ---------- */
  --body-dark:    #284D6E;  /* lede paragraphs, 8.83:1 on white */
  --body:         #436079;  /* default body copy, 6.59:1 on white */
  --label:        #5C7B93;  /* mono labels + captions, 4.46:1, 14px+ only */
  --muted:        #9DB4C8;  /* separators inside eyebrows, decorative only */

  /* ---------- 3. LINES + SURFACES ---------- */
  --border:       #D6E6F2;  /* card + input borders on white */
  --border-warm:  #E6ECF1;  /* section rules, ladder cell dividers */
  --divider:      #DBE8F2;  /* horizontal rules in prose */
  --hairline:     #E3E9EF;  /* browser mock + form chrome */
  --dashed:       #EEF2F6;  /* dashed spec-row separators */
  --wash:         #EEF7FF;  /* sky wash panel + ghost-button hover */
  --wash-card:    #F7FBFF;  /* featured card / row hover */
  --ink-panel:    #0F2740;  /* full-bleed dark media panel */
  --foot:         #0A0D10;  /* footer black */
  --foot-text:    #8F97A3;  /* footer body, 6.61:1 on --foot */
  --on-navy-sky:  #8FD0FF;  /* sky that is legible on navy, 9.13:1 */

  /* ---------- 4. TYPE FAMILIES ----------
     Three families. That is the whole system.
     Anton, Archivo, Inter and Syne are NOT part of it. If you find
     them declared in a file, they are dead weight. Delete them. */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-accent:  'Fraunces', Georgia, 'Times New Roman', serif;   /* ITALIC ONLY, 1-3 words max */
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---------- 5. TYPE SCALE ----------
     Display sizes are fluid. Reading sizes are fixed. */
  --t-hero:       clamp(52px, 8.4vw, 118px);  /* wordmark hero only, line-height .92 */
  --t-h1:         clamp(34px, 5vw, 60px);     /* page-opening h2, line-height 1.05 */
  --t-h2:         clamp(30px, 4.4vw, 52px);   /* section head, line-height 1.05 */
  --t-h3:         clamp(26px, 3.6vw, 42px);   /* sub-section, line-height 1.06 */
  --t-h4:         23px;                       /* card title, line-height 1.2 */
  --t-lede:       clamp(20px, 2.3vw, 29px);   /* hero lede, weight 500, line-height 1.22 */
  --t-intro:      18px;                       /* section intro paragraph */
  --t-body:       15px;                       /* default body copy */
  --t-body-lg:    15.5px;                     /* long-form prose */
  --t-small:      14px;                       /* card list items, form input */
  --t-fine:       13px;                       /* footer, fine print */
  --t-eyebrow:    11px;                       /* mono eyebrow */
  --t-micro:      10.5px;                     /* spec labels, captions */

  --lh-tight:     1.05;
  --lh-head:      1.14;
  --lh-body:      1.6;
  --lh-prose:     1.65;

  --ls-display:   -.03em;   /* headings */
  --ls-wordmark:  -.04em;   /* the wordmark only */
  --ls-eyebrow:   .3em;     /* section eyebrows */
  --ls-label:     .18em;    /* nav links, mono labels */
  --ls-button:    .14em;    /* button text */

  /* ---------- 6. SPACING ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  18px;
  --sp-5:  26px;
  --sp-6:  34px;
  --sp-7:  46px;
  --sp-8:  64px;
  --section-y:      104px;   /* standard section padding, desktop */
  --section-y-sm:   76px;    /* under 860px */
  --wrap-max:       1200px;  /* marketing pages */
  --wrap-prose:     860px;   /* long-form articles */
  --wrap-pad:       44px;    /* desktop gutter */
  --wrap-pad-sm:    22px;    /* mobile gutter */
  --measure:        64ch;    /* max prose line length */

  /* ---------- 7. RADIUS ----------
     Two tiers, and only two. Sharp for marketing chrome,
     soft for long-form reading cards. Never mix them on one page. */
  --radius-btn:     2px;   /* buttons, inputs, chips. Marketing pages. */
  --radius-frame:   0px;   /* image frames, ladders, spec cards. Square. */
  --radius-card:    16px;  /* long-form article cards only (blog index) */

  /* ---------- 8. MOTIFS ---------- */
  --tri-rule: linear-gradient(90deg,
                var(--sky)    0    62%,
                var(--pink)   62%  82%,
                var(--banana) 82%  100%);   /* hard stops. Never blur. */
  --tri-rule-v: linear-gradient(180deg,
                var(--sky)    0    62%,
                var(--pink)   62%  82%,
                var(--banana) 82%  100%);
  --grid-size:      48px;
  --grid-opacity:   .04;
  --grid-line:      rgba(15, 39, 64, .5);
  --grid-line-rev:  rgba(255, 255, 255, .07);

  /* ---------- 9. ELEVATION ----------
     One shadow language: long, low, navy-tinted. No glow. */
  --shadow-card:  0 20px 44px -30px rgba(15, 39, 64, .40);
  --shadow-lift:  0 30px 60px -30px rgba(15, 39, 64, .50);
  --shadow-hero:  0 44px 84px -30px rgba(15, 39, 64, .50);

  /* ---------- 10. MOTION ---------- */
  --ease:         cubic-bezier(.2, .7, .2, 1);
  --ease-reveal:  cubic-bezier(.66, 0, .2, 1);
  --dur-hover:    .18s;
  --dur-move:     .3s;
  --dur-reveal:   .9s;
}

/* Reduced motion is not optional. Copy this into every build. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  video { display: none; }
}