/* ==========================================================================
   Guitar Flow Cards — Design Tokens
   --------------------------------------------------------------------------
   White paper. One accent color at a time. Bold geometric type.
   No dark mode. No gradients (except one allowed soft hero glow).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* --------------------------------------------------------------------
     COLOR — Neutrals (10-step ink scale)
     -------------------------------------------------------------------- */
  --bg:        #FAFAF7;   /* page background — warm paper, not pure white */
  --paper:     #FFFFFF;   /* card / sheet surface */
  --ink-50:    #F5F4F0;
  --ink-100:   #ECEAE3;
  --ink-200:   #DCD9D0;
  --ink-300:   #BFBBB0;
  --ink-400:   #8E8A80;
  --ink-500:   #6B6860;
  --ink-600:   #4A4842;
  --ink-700:   #2E2D28;
  --ink-800:   #1C1B18;
  --ink-900:   #121110;   /* near-black, never pure #000 */

  /* Semantic neutrals */
  --fg-1:      var(--ink-900);   /* primary text */
  --fg-2:      var(--ink-700);   /* secondary text */
  --fg-3:      var(--ink-500);   /* tertiary, captions, meta */
  --fg-mute:   var(--ink-400);   /* placeholders, disabled-ish */
  --border-1:  var(--ink-100);   /* default 1px divider / card border */
  --border-2:  var(--ink-200);   /* heavier divider, input border */

  /* --------------------------------------------------------------------
     COLOR — Six category colors
     Each: -50 (tinted bg) / -500 (header band) / -700 (text on white)
     Vivid but desaturated. OKLCH chroma capped ~ 0.13.
     -------------------------------------------------------------------- */

  /* GREEN — rythme */
  --green-50:   #E8F1EA;
  --green-500:  #5CA877;
  --green-700:  #2E6B45;

  /* ORANGE — harmonie */
  --orange-50:  #FAEDDC;
  --orange-500: #E89B5A;
  --orange-700: #95562A;

  /* RED — mélodie */
  --red-50:     #F7E3E2;
  --red-500:    #DC6360;
  --red-700:    #8B2E2C;

  /* PURPLE — texture / effets */
  --purple-50:  #ECE6F2;
  --purple-500: #8B7EC8;
  --purple-700: #4F4585;

  /* BLUE — technique */
  --blue-50:    #DFE9F3;
  --blue-500:   #5288C2;
  --blue-700:   #244C7E;

  /* SLATE — mindset / repos */
  --slate-50:   #E6E8EB;
  --slate-500:  #6B7785;
  --slate-700:  #38424E;

  /* --------------------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale — minor third (1.2) */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    22px;
  --t-xl:    28px;
  --t-2xl:   36px;
  --t-3xl:   48px;
  --t-4xl:   64px;
  --t-5xl:   84px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-body:   1.55;

  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-loose:  0.04em;
  --track-cap:    0.12em;   /* uppercase eyebrows / category labels */

  /* --------------------------------------------------------------------
     SPACING — 4pt base
     -------------------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* --------------------------------------------------------------------
     RADII
     -------------------------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;    /* default — cards, buttons, inputs */
  --r-lg:   12px;
  --r-pill: 999px;

  /* --------------------------------------------------------------------
     SHADOWS — two levels only
     -------------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(20,20,20,0.04);
  --shadow-2: 0 1px 2px rgba(20,20,20,0.04),
              0 8px 24px -8px rgba(20,20,20,0.10);

  /* --------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------- */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  100ms;
  --dur:       150ms;
  --dur-slow:  300ms;

  /* --------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------- */
  --container: 1200px;
  --read:       56ch;
}

/* ==========================================================================
   BASE / SEMANTIC ELEMENTS
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, var(--t-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, var(--t-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
}

p, .p {
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.eyebrow,
.cap {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-cap);
  color: var(--fg-3);
}

.card-category {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
}

.card-number {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--fg-3);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-300);
  transition: text-decoration-color var(--dur) var(--ease);
}
a:hover { text-decoration-color: var(--ink-700); }

::selection { background: var(--ink-900); color: var(--bg); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
  border-radius: 2px;
}