/* =========================================================================
   The Record Box — Design Tokens
   Source of truth for palette, type, spacing, breakpoints.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     PALETTE — exact hex values per brief §4.
     Never substitute. Rotate across sections (minimum 4 surfaces per page).
     ----------------------------------------------------------------------- */
  --rb-cream:        #F4EDE0;   /* primary light surface — warm paper */
  --rb-cream-alt:    #FAF6EC;   /* alternate light surface — barely lighter */
  --rb-paper:        #EFE6D4;   /* paper-tinted variant for cards/tags */
  --rb-charcoal:     #1F1A17;   /* primary dark — warm near-black, not grey */
  --rb-charcoal-2:   #2A241F;   /* alternate dark for section variation */
  --rb-deepest:      #15110E;   /* footer and deepest surface */
  --rb-red:          #A8342A;   /* Phil's shopfront red — primary accent */
  --rb-red-hover:    #8A2820;   /* hover state on accent */
  --rb-brass:        #C7933A;   /* secondary accent — dividers, tags (rare) */
  --rb-ink:          #2A241F;   /* body text on light backgrounds */
  --rb-ink-soft:     #5C5248;   /* secondary text / captions */

  /* Semantic aliases (readability in components; map to the palette above) */
  --rb-bg:           var(--rb-cream);
  --rb-text:         var(--rb-ink);
  --rb-text-soft:    var(--rb-ink-soft);
  --rb-accent:       var(--rb-red);
  --rb-accent-hover: var(--rb-red-hover);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — families, scale, weights, spacing.
     Desktop values here; mobile overrides applied in main.css via @media.
     Scale per brief §4 "Typography".
     ----------------------------------------------------------------------- */
  --rb-font-serif:   "Fraunces", "Times New Roman", serif;
  --rb-font-marker:  "Permanent Marker", "Comic Sans MS", cursive;
  --rb-font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale — desktop */
  --rb-size-display:         96px;  /* Fraunces 800 — hero headline */
  --rb-size-headline:        64px;  /* Fraunces 700 italic — section */
  --rb-size-subheadline:     32px;  /* Fraunces 500 */
  --rb-size-body:            17px;  /* DM Sans 400 */
  --rb-size-small:           13px;  /* DM Sans 500 letter-spaced */
  --rb-size-marker:          24px;  /* Permanent Marker */
  --rb-size-label:           11px;  /* DM Sans 700 uppercase (section labels) */

  /* Weights */
  --rb-weight-regular:   400;
  --rb-weight-medium:    500;
  --rb-weight-semibold:  600;
  --rb-weight-bold:      700;
  --rb-weight-black:     800;

  /* Line-heights */
  --rb-lh-tight:  1.05;
  --rb-lh-snug:   1.2;
  --rb-lh-body:   1.75;    /* body copy per brief */

  /* Letter-spacing */
  --rb-ls-tight:   -0.02em;
  --rb-ls-body:    0;
  --rb-ls-caption: 0.04em;
  --rb-ls-label:   0.14em;  /* section label tag */
  --rb-ls-caps:    0.12em;  /* reviewer names, small caps */

  /* -----------------------------------------------------------------------
     SPACING — consistent rhythm. Section padding per JW_MASTER_STANDARDS §2.
     ----------------------------------------------------------------------- */
  --rb-space-section-desktop: 120px;
  --rb-space-section-tablet:  80px;
  --rb-space-section-mobile:  60px;

  --rb-container-max:         1200px;
  --rb-container-pad-desktop: 48px;
  --rb-container-pad-tablet:  32px;
  --rb-container-pad-mobile:  20px;

  /* -----------------------------------------------------------------------
     BREAKPOINTS — for reference only; CSS uses @media directly.
     Large desktop: 1440+  Desktop: 1024–1439  Tablet: 768–1023  Mobile: <768
     ----------------------------------------------------------------------- */
  --rb-bp-large-desktop: 1440px;
  --rb-bp-desktop:       1024px;
  --rb-bp-tablet:        768px;

  /* -----------------------------------------------------------------------
     SURFACE / LAYER
     ----------------------------------------------------------------------- */
  /* Grain sits ABOVE content + nav so it applies sitewide (brief §4
     "sitewide"). Kept below overlay and modal so those stay clean when open.
     See stage-2 follow-up: we raised this from 1 (brief literal) to 110 to
     reconcile the brief's z:1 spec with its "sitewide" intent. */
  --rb-z-grain:    110;
  --rb-z-sticky:   50;
  --rb-z-nav:      100;
  --rb-z-overlay:  900;
  --rb-z-modal:    1000;

  /* Paper grain overlay (brief §4) */
  --rb-grain-opacity: 0.07;

  /* Motion */
  --rb-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --rb-dur-fast:   0.2s;
  --rb-dur-med:    0.3s;
  --rb-dur-slow:   0.6s;
}