/* ==========================================================================
   Guitar Thing — design tokens (Direction C: Sunburst Showcard)
   The ONLY place colors, type, spacing, radii and shadows are defined.
   Everything else (site.css, tool templates) uses these variables.
   Stage 03 · 2026-09-22
   ========================================================================== */

:root {
  /* ---- Brand orange (canonical) -------------------------------------------
     #F26422 is the one Guitar Thing orange. Re-check it against the pick logo
     when a logo file exists (owner-decisions §1 row 3). Use it for marks,
     accents and note dots, and never as text on a light background (2.6:1).
     For orange text or buttons on light grounds use --orange-deep. */
  --orange:            #F26422;
  --orange-deep:       #B4460F;   /* white text on it 5.5:1 · as text on paper 5.0:1 */
  --orange-deep-hover: #963A0C;   /* white text on it 7.2:1 */

  /* ---- Sunburst (home hero ONLY) ---------------------------------------- */
  --burst-center: #F2B75E;
  --burst-amber:  #DD8A32;
  --burst-mid:    #A5511B;
  --burst-dark:   #5A2710;
  --burst-deep:   #2A140A;
  --burst-edge:   #1E0E07;

  /* ---- Grounds (all other pages) --------------------------------------- */
  --paper:        #FBF3E1;   /* tag paper — page background */
  --card:         #FFFBF2;   /* raised surfaces: tool panels, cards */
  --sunken:       #F1E4C8;   /* wells, inactive segments, code */
  --cream:        #F5E9CF;   /* binding cream — text/buttons on dark */

  /* ---- Ink ------------------------------------------------------------- */
  --ink:          #24120A;   /* body text · 16.3:1 on paper */
  --tobacco:      #7A3E17;   /* secondary text, rules, labels · 7.5:1 on paper */
  --muted:        #6E5543;   /* captions, fine print · 6.3:1 on paper */

  /* ---- Lines ----------------------------------------------------------- */
  --line:         #E3D1AE;   /* decorative dividers only */
  --control-line: #8C6A4F;   /* borders of controls (3:1+ UI contrast, 4.4:1) */

  /* ---- Focus ----------------------------------------------------------- */
  --focus:        #24120A;   /* on light grounds */
  --focus-on-dark:#F5E9CF;   /* inside the hero */

  /* ---- Fretboard (tools) ----------------------------------------------- */
  --fb-board:     #2A140A;
  --fb-fret:      #E3A04A;
  --fb-string:    #F5E9CF;
  --fb-inlay:     rgba(245, 233, 207, .25);
  --fb-note:      #F26422;   /* ink label on it 5.7:1 */
  --fb-note-ink:  #24120A;
  --fb-root:      #F5E9CF;
  --fb-root-ink:  #24120A;
  --fb-ghost:     rgba(245, 233, 207, .35);   /* "show scale" ghost dots */

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Abril Fatface", "Bodoni 72", Didot, Georgia, serif;
  --font-body:    "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-tag:     "Courier Prime", "Courier New", Courier, ui-monospace, monospace;

  --fs-xs:   0.8125rem;   /* 13px — tags, fine print */
  --fs-sm:   0.9375rem;   /* 15px — captions, UI labels */
  --fs-md:   1.0625rem;   /* 17px — body */
  --fs-lg:   1.25rem;     /* 20px — lede */
  --fs-xl:   1.625rem;    /* 26px — h3 */
  --fs-2xl:  clamp(1.9rem, 4.2vw, 2.6rem);   /* h2 */
  --fs-3xl:  clamp(2.2rem, 5.4vw, 3.4rem);   /* tool page h1 */
  --fs-hero: clamp(2.8rem, 7.4vw, 5.6rem);   /* home hero h1 */

  --lh-tight: 1.02;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --tracking-tag: 0.12em;

  /* ---- Space (4px base) ----------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;

  --gutter:   clamp(16px, 4vw, 40px);
  --measure:  65ch;
  --wide:     1180px;
  --tap:      44px;         /* minimum tap target */

  /* ---- Shape ----------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgba(36, 18, 10, .06), 0 10px 24px -16px rgba(36, 18, 10, .45);
  --shadow-tag:  0 8px 16px rgba(0, 0, 0, .35);

  /* ---- Binding stripe (cream / edge purfling around the hero) --------- */
  --binding: inset 0 0 0 6px var(--burst-edge), inset 0 0 0 8px var(--cream),
             inset 0 0 0 10px var(--burst-edge), inset 0 0 0 11px var(--cream);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  160ms;
}