/* =========================================================================
   BROADSIDE — Ringneck Marketing Website Design System
   tokens/broadside-tokens.css · v1.0.0 · Extracted from webinar.html
   -------------------------------------------------------------------------
   THE SOURCE OF TRUTH. Every color, size, radius, shadow, and motion curve
   in the marketing site is declared here and nowhere else.

   THE RULE: a component may never reference a primitive or a raw value.
   Components consume SEMANTIC tokens only. If you write #ef5b37, 7px, or
   .66rem inside a component, the system has already started to fracture.
   Add a token instead.

   Section index
     1. Primitives — colors that exist
     2. Semantic surfaces — where things sit
     3. Semantic text — what things say
     4. Semantic accent + role map — what things mean
     5. Borders and rules
     6. Typography
     7. Space and measure
     8. Radius (mostly zero — this is a hard-edged system)
     9. Elevation
    10. Motion
    11. Signature — tilt, texture, glow
    12. Layers
   ========================================================================= */

:root {

  /* =======================================================================
     1. PRIMITIVES — a color that exists, with no job yet.
        Never reference these outside sections 2–5 of this file.
     ======================================================================= */

  /* Navy — the brand's ground. Ordered dark → light.
     A few steps in each ramp have no current semantic consumer. They stay
     because a ramp with holes in it invites someone to invent a value; the
     rule is that you may promote one of these to a semantic token, never
     type a new hex. */
  --rn-navy-950: #020f14;
  --rn-navy-900: #021219;
  --rn-navy-850: #03171e;
  --rn-navy-800: #041820;   /* THE brand navy */
  --rn-navy-750: #07222c;
  --rn-navy-700: #062836;
  --rn-navy-600: #0a3746;
  --rn-navy-500: #05303e;

  /* Ink — near-black with a green cast, for type on light ground */
  --rn-ink-900: #09252d;
  --rn-ink-500: #49646b;
  --rn-ink-400: #5f716d;    /* darkened from #738783 — see docs/04, contrast */

  /* Teal — the system/technology signal */
  --rn-teal-300: #7fecdd;
  --rn-teal-500: #32dfc8;   /* THE brand teal */
  --rn-teal-700: #0a9c90;   /* display-size teal on white (≥18.66px bold)   */
  --rn-teal-750: #07766e;   /* the only teal safe for SMALL type on white   */
  --rn-teal-800: #075d56;
  --rn-teal-850: #15534e;

  /* Orange — the action signal */
  --rn-orange-100: #ffe6dd;
  --rn-orange-150: #ffd6ca;
  --rn-orange-200: #f3b4a4;
  --rn-orange-400: #ff704e;
  --rn-orange-500: #ef5b37;  /* THE brand orange */
  --rn-orange-600: #d84728;
  --rn-orange-650: #c03c1d;  /* the only orange safe for SMALL type on white */

  /* Gold — the proof/number highlight. Used sparingly, never for action. */
  --rn-gold-500: #f4bd45;

  /* Warm neutrals — the "paper" side of the site */
  --rn-white:     #ffffff;
  --rn-paper-50:  #f7f8f5;
  --rn-paper-100: #edf2ef;

  /* Type ramp for dark ground, light → dim */
  --rn-mist-100: #d9e5e2;
  --rn-mist-200: #d6e3df;
  --rn-mist-300: #c9d5d2;
  --rn-mist-400: #b1c6c2;
  --rn-mist-500: #a7bbb8;
  --rn-mist-600: #91aaa5;
  --rn-mist-700: #829b96;
  --rn-mist-800: #718984;


  /* =======================================================================
     2. SEMANTIC SURFACES — where a thing sits.
        The site alternates dark ("navy") and light ("paper") bands. That
        alternation is the page rhythm; see docs/03-patterns-and-pages.md.
     ======================================================================= */

  --surface-canvas:      var(--rn-navy-800);  /* page background, dark bands */
  --surface-raised:      var(--rn-navy-700);  /* panels on the dark ground */
  --surface-sunken:      var(--rn-navy-850);  /* inputs, wells */
  --surface-deep:        var(--rn-navy-900);  /* research bar, sub-bands */
  --surface-footer:      var(--rn-navy-950);  /* the last band on the page */
  --surface-form:        var(--rn-navy-750);  /* registration panel */

  --surface-paper:       var(--rn-paper-50);  /* light band */
  --surface-paper-alt:   var(--rn-paper-100); /* insets inside a light band */
  --surface-card:        var(--rn-white);     /* card on any ground */

  --surface-accent:      var(--rn-teal-500);  /* the full-bleed teal band */

  /* Composite band backgrounds — gradient + texture, ready to assign */
  --surface-hero:
    linear-gradient(115deg, rgba(4, 24, 32, .98), rgba(5, 48, 62, .93)),
    var(--rn-navy-800);
  --surface-band-deep:
    linear-gradient(rgba(5, 45, 58, .91), rgba(4, 32, 42, .96)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 22px),
    var(--rn-navy-700);
  --surface-band-close:
    linear-gradient(115deg, rgba(4, 24, 32, .98), rgba(9, 54, 68, .96)),
    var(--rn-navy-800);
  --surface-band-halo:
    radial-gradient(circle at 50% 10%, rgba(50, 223, 200, .17), transparent 40%),
    var(--rn-navy-800);
  --surface-paper-dotted:
    radial-gradient(circle, rgba(9, 37, 45, .055) .8px, transparent .8px),
    var(--rn-paper-50);
  --surface-paper-wash:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(247, 248, 245, .95)),
    var(--rn-paper-50);


  /* =======================================================================
     3. SEMANTIC TEXT
        Two ramps, because the site has two grounds. Never mix them:
        -on-dark tokens on a paper surface will fail contrast, and vice versa.
     ======================================================================= */

  /* On dark ground */
  --text-heading:     var(--rn-white);
  --text-primary:     var(--rn-mist-100);
  --text-secondary:   var(--rn-mist-400);
  --text-muted:       var(--rn-mist-500);
  --text-faint:       var(--rn-mist-700);   /* legal, timestamps — 4.5:1 min */
  --text-micro:       var(--rn-mist-800);   /* footer only, 14px+ */

  /* On light ground */
  --text-ink:         var(--rn-ink-900);
  --text-ink-soft:    var(--rn-ink-500);
  --text-ink-faint:   var(--rn-ink-400);

  /* On the teal accent band */
  --text-on-accent:        var(--rn-navy-800);
  --text-on-accent-soft:   var(--rn-teal-850);
  --text-on-accent-eyebrow:var(--rn-teal-800);

  /* On the orange action surface */
  --text-on-action:      var(--rn-white);
  --text-on-action-soft: var(--rn-orange-100);


  /* =======================================================================
     4. SEMANTIC ACCENT + ROLE MAP
        One hue per concept, site-wide. This is what makes eleven pages read
        as one product instead of eleven pages.

          ORANGE = do something. Buttons, CTAs, deadlines, the cost of
                   inaction, the number that hurts.
          TEAL   = the system works. Technology, capability, proof of a
                   fixed problem, the number that helps.
          GOLD   = look here. A single highlighted figure inside a sentence.
                   Never a background, never a button, never two per screen.
     ======================================================================= */

  --accent-action:         var(--rn-orange-500);
  --accent-action-hi:      var(--rn-orange-400);  /* hover brighten target   */
  --accent-action-press:   var(--rn-orange-600);  /* the 6px hard shadow     */
  --accent-action-ink:     var(--rn-orange-650);  /* SMALL orange type on white */
  --accent-action-display: var(--rn-orange-500);  /* orange numerals ≥24px      */

  --accent-system:         var(--rn-teal-500);
  --accent-system-ink:     var(--rn-teal-750);    /* SMALL teal type on white   */
  --accent-system-display: var(--rn-teal-700);    /* teal numerals ≥24px        */
  --accent-system-deep:    var(--rn-teal-800);

  --accent-highlight:      var(--rn-gold-500);

  /* Focus. Two rings, because no single color clears 3:1 against navy AND
     paper AND the teal band. Gold reads on navy; the navy halo reads on
     paper, white, and teal. Together they are visible on every ground in
     the system. Never replace this with a single-color outline. */
  --focus-ring:  var(--rn-gold-500);
  --focus-halo:  var(--rn-navy-800);

  /* Status — inherited from the role map, not invented separately */
  --status-positive:      var(--rn-teal-750);
  --status-positive-bg:   rgba(50, 223, 200, .11);
  --status-negative:      var(--rn-orange-600);
  --status-negative-bg:   rgba(239, 91, 55, .1);
  --status-negative-line: rgba(239, 91, 55, .45);
  --status-negative-text: var(--rn-orange-150);


  /* =======================================================================
     5. BORDERS AND RULES
     ======================================================================= */

  --border-on-dark:        rgba(255, 255, 255, .08);
  --border-on-dark-strong: rgba(255, 255, 255, .12);
  --border-on-dark-input:  rgba(255, 255, 255, .18);
  --border-teal:           rgba(135, 202, 194, .2);
  --border-on-paper:       rgba(9, 37, 45, .15);

  --border-width-hair:   1px;
  --border-width-thick:  2px;   /* outlined labels, time blocks */
  --border-width-accent: 4px;   /* left rules on list items, card underlines */
  --border-width-cap:    5px;   /* the colored cap on a stat card           */
  --border-width-poster: 5px;   /* the date poster frame                    */
  --border-width-frame:  7px;   /* photo frames                             */

  /* Translucent fills used on dark ground */
  --fill-on-dark-subtle: rgba(255, 255, 255, .035);
  --fill-on-dark:        rgba(255, 255, 255, .045);


  /* =======================================================================
     6. TYPOGRAPHY
        Four families, four jobs. Do not add a fifth.
          display — condensed, all-caps, tight. Headlines and big numbers.
          heading — the humanist sans. Subheads, lead paragraphs, emphasis.
          body    — Inter. Everything you actually read at length.
          mono    — labels, eyebrows, legal, timestamps. Never a sentence.
     ======================================================================= */

  --font-display: "Avenir Next Condensed", "Arial Narrow", Impact, sans-serif;
  --font-heading: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --font-body:    Inter, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SF Mono", "SFMono-Regular", Consolas, monospace;

  /* Fluid display scale — all-caps, condensed, negative tracking */
  --text-display-1: clamp(3.7rem, 6.9vw, 7rem);     /* hero headline        */
  --text-display-2: clamp(3rem, 6vw, 5.8rem);       /* section headline     */
  --text-display-3: clamp(2.8rem, 5.3vw, 5.2rem);   /* secondary section    */
  --text-display-4: clamp(2.8rem, 7vw, 4.9rem);     /* dialog headline      */
  --text-numeral:   clamp(3.6rem, 7vw, 6.6rem);     /* poster / time block  */
  --text-stat:      clamp(3rem, 5vw, 4.6rem);       /* stat card figure     */

  /* Heading scale — sentence case, humanist */
  --text-h2-alt:  clamp(1.55rem, 3.3vw, 2.7rem);    /* pull quote           */
  --text-h3:      clamp(1.6rem, 3vw, 2.25rem);
  --text-h4:      clamp(1.45rem, 2.8vw, 2rem);
  --text-h5:      1.18rem;
  --text-h6:      1.08rem;

  /* Reading scale */
  --text-lead:    clamp(1.18rem, 2vw, 1.5rem);
  --text-punch:   clamp(1.35rem, 2.5vw, 1.9rem);
  --text-body:    1rem;      /* 17px root on desktop, 16px ≤760px */
  --text-sm:      .95rem;
  --text-ms:      .85rem;
  --text-xs:      .78rem;
  --text-2xs:     .75rem;
  --text-3xs:     .75rem;
  --text-4xs:     .75rem;
  --text-5xs:     .75rem;   /* the micro scale bottoms out at 12px — below that
                               nothing on a phone is readable */

  /* Two sizes that are declared in px on purpose, because the thresholds
     they exist to clear are defined in px, not in ems:
       --text-legal  the 12px floor for anything that is a SENTENCE
       --text-button the 18.66px WCAG large-text threshold, which is what
                     lets white-on-orange clear 3:1 (it cannot clear 4.5:1
                     at any size without abandoning the brand orange) */
  --text-legal:   12px;
  --text-button:  19px;

  --root-size:        17px;
  --root-size-mobile: 16px;

  --weight-regular:  400;
  --weight-medium:   550;
  --weight-book:     650;
  --weight-semi:     750;
  --weight-bold:     800;
  --weight-heavy:    850;
  --weight-black:    900;

  --leading-slam:   .85;   /* stacked numerals                     */
  --leading-tight:  .9;    /* display headlines                    */
  --leading-snug:   1.15;  /* subheads                             */
  --leading-normal: 1.35;
  --leading-body:   1.62;  /* the one true body line-height        */

  --tracking-slam:   -.045em;
  --tracking-tight:  -.035em;
  --tracking-snug:   -.015em;
  --tracking-label:  .09em;
  --tracking-wide:   .14em;
  --tracking-widest: .16em;


  /* =======================================================================
     7. SPACE AND MEASURE — 4px base
     ======================================================================= */

  --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:  34px;
  --space-9:  42px;
  --space-10: 52px;
  --space-11: 68px;
  --space-12: 88px;

  /* Rhythm — the only vertical values a section should ever use */
  --space-section:      clamp(76px, 9vw, 126px);
  --space-section-tight:clamp(60px, 7vw, 90px);
  --space-block:        clamp(44px, 6vw, 66px);
  --space-card:         clamp(34px, 6vw, 68px);
  --space-card-sm:      clamp(30px, 4vw, 48px);
  --space-gutter:       clamp(36px, 5vw, 72px);

  /* Measure */
  --wrap:       min(1160px, calc(100% - 44px));
  --wrap-tight: min(850px, calc(100% - 44px));
  --prose-max:  730px;
  --prose-wide: 940px;
  --headline-max: 930px;

  /* Grid gaps */
  --gap-tight: 8px;
  --gap-card:  12px;
  --gap-panel: 18px;
  --gap-stack: 30px;


  /* =======================================================================
     8. RADIUS
        THIS IS A HARD-EDGED SYSTEM. Cards, bands, panels, and photos are
        square. Radius exists only where a control must read as a control.
        A rounded card is off-brand — see docs/01-foundations.md.
     ======================================================================= */

  --radius-none:   0;
  --radius-chip:   4px;
  --radius-input:  5px;
  --radius-cta:    6px;
  --radius-button: 7px;
  --radius-dialog: 8px;
  --radius-pill:   999px;
  --radius-dot:    50%;
  --radius-arch:   220px 220px 0 0;   /* the presenter photo silhouette */


  /* =======================================================================
     9. ELEVATION
        Shadows are long, soft, and navy-tinted — never neutral gray.
     ======================================================================= */

  --shadow-card:    0 26px 70px rgba(3, 24, 32, .2);
  --shadow-stat:    0 12px 34px rgba(3, 24, 32, .08);
  --shadow-float:   0 20px 52px rgba(0, 0, 0, .22);
  --shadow-photo:   0 28px 72px rgba(0, 0, 0, .38);
  --shadow-tag:     0 16px 38px rgba(0, 0, 0, .34);
  --shadow-form:    0 28px 80px rgba(0, 0, 0, .4);
  --shadow-modal:   0 50px 130px rgba(0, 0, 0, .75);
  --shadow-sticky:  0 8px 28px rgba(0, 0, 0, .36);

  /* The button's two-part shadow: a hard "plate" plus a soft cast.
     The plate is what makes it feel pressable. Do not drop it. */
  --shadow-button:       0 6px 0 var(--accent-action-press), 0 18px 34px rgba(239, 91, 55, .22);
  --shadow-button-hover: 0 8px 0 var(--accent-action-press), 0 22px 42px rgba(239, 91, 55, .3);
  --shadow-button-press: 0 2px 0 var(--accent-action-press), 0 10px 22px rgba(239, 91, 55, .2);

  --glow-teal:      0 0 0 5px rgba(50, 223, 200, .11), 0 0 16px rgba(50, 223, 200, .65);
  --glow-teal-soft: 0 10px 30px rgba(50, 223, 200, .2);
  --ring-focus:     0 0 0 3px rgba(50, 223, 200, .14);


  /* =======================================================================
     10. MOTION
         One curve. Four durations. Everything respects reduced-motion.
     ======================================================================= */

  --ease:          cubic-bezier(.22, .68, .2, 1);
  --duration-fast: .2s;
  --duration-mid:  .3s;
  --duration-slow: .65s;
  --lift-hover:    -2px;
  --lift-press:    4px;


  /* =======================================================================
     11. SIGNATURE — the three moves that make this look like Ringneck and
         not like a template. Use them deliberately and rarely.

         TILT    — one element per section may be rotated. Never two
                   adjacent. Never body copy.
         TEXTURE — a dot grid or diagonal hatch at very low opacity, sitting
                   behind content on a band. Never on a card.
         GLOW    — teal only, and only on something that signals "live".
     ======================================================================= */

  --tilt-slight:   rotate(-1deg);
  --tilt-left:     rotate(-2deg);
  --tilt-left-lg:  rotate(-3deg);
  --tilt-right:    rotate(4deg);

  --texture-dots-ink:  radial-gradient(circle, rgba(9, 37, 45, .055) .8px, transparent .8px);
  --texture-dots-teal: radial-gradient(var(--rn-teal-500) .8px, transparent .8px);
  --texture-dots-navy: radial-gradient(var(--rn-navy-800) .9px, transparent .9px);
  --texture-hatch:     repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 14px);
  --texture-hatch-bold:repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 22px);

  --texture-size:      18px 18px;
  --texture-size-lg:   20px 20px;
  --texture-opacity:   .12;

  --spark-progress: linear-gradient(90deg, var(--accent-action), var(--accent-highlight), var(--accent-system));


  /* =======================================================================
     12. LAYERS
     ======================================================================= */

  --z-base:        1;
  --z-raised:      2;
  --z-overlap:     4;
  --z-header:      100;
  --z-sticky-cta:  250;
  --z-progress:    500;
  --z-skip:        1000;
}


/* ===========================================================================
   RESPONSIVE TOKEN OVERRIDES
   The measure tightens on small screens. Nothing else changes — the type
   scale is already fluid, so components need no breakpoint of their own.
   =========================================================================== */

@media (max-width: 760px) {
  :root {
    --wrap:       min(100% - 30px, 1160px);
    --wrap-tight: min(100% - 30px, 850px);
  }
}


/* ===========================================================================
   MOTION PREFERENCE
   Declared here so every consumer of the token layer inherits it, whether or
   not they load broadside.css.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: .01ms;
    --duration-mid:  .01ms;
    --duration-slow: .01ms;
    --lift-hover:    0;
    --lift-press:    0;
    --tilt-slight:   none;
    --tilt-left:     none;
    --tilt-left-lg:  none;
    --tilt-right:    none;
  }
}