/* ==========================================================================
   PlayGuitar v3 — Design Tokens
   The single source of truth for colour, type, spacing, depth.
   Evolves reference/legacy-main.css. Orange is the brand/action hue
   (swappable per satellite via --brand); green is a quiet secondary accent
   (--accent). Never hardcode either hex; reference the tokens.
   ========================================================================== */

:root {
  /* ---- Brand hue (THE swappable token) -------------------------------- */
  /* PlayGuitar = orange. Satellites override these six values only. */
  --brand:            #EC7C2A;   /* PlayGuitar orange — logo guitar */
  --brand-hover:      #D26B1F;   /* hover / press */
  --brand-strong:     #B85A14;   /* deep, for text-on-pale or emphasis */
  --brand-soft:       #FBEEDE;   /* soft tint fill (callouts, "after" side) */
  --brand-wash:       #FDF5EC;   /* large quiet section wash */
  --brand-ring:       rgba(236,124,42,0.28); /* focus ring (derive per hue) */

  /* ---- Accent hue (secondary; supports the brand, never dominant) ----- */
  /* PlayGuitar = forest green. Pairs with the orange; used as seasoning. */
  --accent:           #1F7A47;   /* forest green — grounding, trust, ticks */
  --accent-hover:     #185E37;
  --accent-soft:      #E7F2EB;   /* soft green tint */
  --accent-deep:      #123D24;   /* optional deep-green grounding panel */

  /* ---- Paper (surfaces) ----------------------------------------------- */
  --paper:            #FDFCFA;   /* canvas — 80%+ of every screen */
  --paper-tint:       #F4F2EC;   /* alternating section */
  --paper-hero:       #F0EFE8;   /* warmer set-apart zone */
  --paper-deep:       #E9E5DC;   /* hover wash, divider fill */

  /* ---- Ink (text + structure) ----------------------------------------- */
  --ink-heading:      #1A1A1A;   /* headlines */
  --ink-body:         #2D2D2D;   /* body floor — never lighter for paragraphs */
  --ink-muted:        #5C5C5C;   /* captions, meta, eyebrows */
  --ink-light:        #8A8A8A;   /* tertiary meta only */
  --hairline:         #E4E0D8;   /* 1px borders, dividers */

  /* ---- Dark surface (the one heavy anchor) ---------------------------- */
  --dark:             #1B1916;   /* warm neutral near-black (no green tint) */
  --dark-elev:        #2A2723;   /* raised card on dark */
  --on-dark:          #FFFFFF;
  --on-dark-muted:    rgba(255,255,255,0.72);
  --on-dark-faint:    rgba(255,255,255,0.45);

  /* ---- Semantic (rare; never brand) ----------------------------------- */
  --success:          var(--accent); /* the green tick — included/done/sent */
  --error:            #C0392B;
  --warning:          var(--brand);

  /* ---- Type families --------------------------------------------------- */
  --font-heading:     'Literata', Georgia, 'Times New Roman', serif;
  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'Courier New', Courier, monospace;

  /* ---- Type scale ------------------------------------------------------ */
  --text-xs:    0.75rem;   /* 12px — meta only */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px — BODY FLOOR */
  --text-md:    1.125rem;  /* 18px — long-form body */
  --text-lg:    1.25rem;   /* 20px — sales body, sub-leads */
  --text-xl:    1.5rem;    /* 24px — H3 */
  --text-2xl:   1.875rem;  /* 30px — H2 small vp */
  --text-3xl:   2.25rem;   /* 36px — H1 / H2 large vp */
  --text-4xl:   2.75rem;   /* 44px — display */

  /* fluid heading helpers */
  --h1: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  --h2: clamp(var(--text-xl), 3vw, var(--text-3xl));

  --leading-tight:  1.25;  /* display */
  --leading-snug:   1.4;   /* subheads */
  --leading-normal: 1.6;   /* body */
  --leading-loose:  1.8;   /* long-form body (blog, sales) */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --track-tight: -0.02em; /* large display headings */
  --track-eyebrow: 0.12em;

  /* ---- Spacing (8px ladder) ------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;

  /* ---- Layout ---------------------------------------------------------- */
  --width-content: 700px;  /* long-form reading column */
  --width-wide:    960px;
  --width-max:     1200px;
  --width-narrow:  560px;
  --container-padding: var(--space-5);

  /* ---- Radii (no pills except tiny badges) ---------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;    /* most cards, inputs, buttons */
  --radius-lg: 12px;   /* larger cards, image wells */
  --radius-pill: 9999px; /* tiny status/category badges ONLY */

  /* ---- Depth (warm, soft, low) ---------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(27,25,22,0.06);
  --shadow-md: 0 4px 16px rgba(27,25,22,0.08);
  --shadow-lg: 0 12px 36px rgba(27,25,22,0.12);
  --shadow-focus: 0 0 0 3px var(--brand-ring);

  /* ---- Motion (calm) --------------------------------------------------- */
  --transition-fast: 150ms ease;

  /* ---- Z-index --------------------------------------------------------- */
  --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400;
}

/* ==========================================================================
   Legacy bridge — maps v3 tokens onto the legacy main.css variable names so
   the existing 3,900-line stylesheet re-skins to orange-primary during the
   build transition. Remove once the theme CSS is fully migrated to v3 names.
   ========================================================================== */
:root {
  /* legacy 'primary' was green; keep it green so un-migrated pages stay
     coherent. Orange-dominance comes from the NEW templates, not from
     re-skinning the old green-heavy CSS (that would over-orange it). */
  --color-primary:        var(--accent);
  --color-primary-dark:   var(--accent-hover);
  --color-primary-darker: var(--accent-deep);
  --color-primary-light:  var(--accent-soft);
  --color-primary-mid:    var(--accent);
  --color-accent:         var(--brand);        /* orange = the action hue */
  --color-accent-dark:    var(--brand-hover);
  --color-accent-light:   var(--brand-soft);

  --color-text:        var(--ink-body);
  --color-text-muted:  var(--ink-muted);
  --color-text-light:  var(--ink-light);
  --color-heading:     var(--ink-heading);
  --color-text-inverse:#FFFFFF;

  --color-bg:          var(--paper);
  --color-bg-warm:     var(--paper);
  --color-bg-alt:      var(--paper-tint);
  --color-bg-hero:     var(--paper-hero);
  --color-bg-dark:     var(--dark);

  --color-border:        var(--hairline);
  --color-border-light:  var(--hairline);

  --color-success: var(--success);
  --color-error:   var(--error);
  --color-warning: var(--warning);
}

/* Satellite override pattern — drop a brand.css with just these six lines:
   :root {
     --brand:        #1f5fae;   --brand-hover: #184c8a;  --brand-strong: #123a6b;
     --brand-soft:   #e6eef8;   --brand-wash:  #f2f6fc;  --brand-ring: rgba(31,95,174,.28);
   }
   Everything else inherits. Never edit component CSS per satellite. */