/* ============================================================
   Grateful Living Medicine — Design tokens
   Extracted verbatim from the design file (colors_and_type.css),
   per official brand guidelines (GLM_Brand Guidelines.jpg).
   ============================================================ */

/* ─── Fonts (self-hosted from /assets/fonts) ─────────────── */
@font-face {
  font-family: 'Romantic';
  src: url('../fonts/Romantic.woff') format('woff'),
       url('../fonts/Romantic.otf') format('opentype'),
       url('../fonts/Romantic.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------
     OFFICIAL BRAND PALETTE (8 colors, per guidelines)
     ------------------------------------------------------------ */
  --glm-teal:     #33777F;   /* RGB 51,119,127 */
  --glm-pine:     #45683E;   /* RGB 69,104,62  */
  --glm-dandelion:#EFAA25;   /* RGB 239,170,37 */
  --glm-pinecone: #684537;   /* RGB 104,69,55  */
  --glm-almond:   #D9A6A0;   /* RGB 217,166,160 — Toasted Almond */
  --glm-mint:     #C4D6BC;   /* RGB 196,214,188 */
  --glm-powder:   #F7EFDF;   /* RGB 247,239,223 */
  --glm-black:    #0E1620;   /* RGB 14,22,32 */
  --glm-white:    #FFFFFF;

  /* Derived tints/shades for UI states (not in the guidelines —
     kept minimal and labelled so a designer can replace them
     without touching semantic roles.) */
  --glm-teal-hover:   #2A636A;
  --glm-teal-soft:    #E0ECEE;
  --glm-pine-hover:   #385432;
  --glm-pine-soft:    #E4EBE0;
  --glm-dandelion-soft:#FBE7B5;
  --glm-almond-soft:  #F2DCD8;
  --glm-powder-warm:  #F2E8D5;   /* a touch richer than Powder for panels */
  --glm-powder-cream: #FCF8EE;   /* a touch paler than Powder for surfaces */
  --glm-ink-soft:     #1E2833;

  /* Semantic roles ------------------------------------------ */
  --color-bg:             var(--glm-powder);
  --color-bg-alt:         var(--glm-powder-cream);
  --color-bg-elevated:    var(--glm-white);
  --color-bg-inverse:     var(--glm-black);
  --color-bg-accent:      var(--glm-teal);
  --color-bg-muted:       var(--glm-powder-warm);

  --color-fg:             var(--glm-black);
  --color-fg-soft:        var(--glm-ink-soft);
  --color-fg-muted:       #3D4651;  /* darkened for WCAG AA on cream */
  --color-fg-subtle:      #545E69;  /* darkened from #6B7580 to pass 4.5:1 on powder */
  --color-fg-on-accent:   var(--glm-powder);
  --color-fg-on-dark:     var(--glm-powder);

  --color-accent:         var(--glm-teal);
  --color-accent-hover:   var(--glm-teal-hover);
  --color-accent-soft:    var(--glm-teal-soft);
  --color-warm:           var(--glm-almond);
  --color-warm-soft:      var(--glm-almond-soft);

  --color-border:         rgba(14, 22, 32, 0.14);
  --color-border-strong:  rgba(14, 22, 32, 0.26);
  --color-divider:        rgba(14, 22, 32, 0.10);

  --color-success:        var(--glm-pine);
  --color-warning:        var(--glm-dandelion);
  --color-danger:         #B44A3D;

  /* ------------------------------------------------------------
     TYPOGRAPHY (per guidelines)
     • Romantic — ALL CAPS:   HEADER 01 · tracking 50 · leading 10.9
     • Romantic — Regular:    Header 02 · tracking 0  · leading 1:1
     • Source Sans 3 Italic:  HEADER 03 · tracking 30 · leading 1:1
     • Source Sans 3 Regular: Body      · tracking 0  · leading 5:6
     Adobe tracking 50 → 0.05em, 30 → 0.03em.
     ------------------------------------------------------------ */
  --font-display: 'Romantic', 'Didot', 'Bodoni Moda', Georgia, serif;
  --font-sans:    'Source Sans 3', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-3xs: 12.5px; --text-2xs: 14px; --text-xs: 15px;
  --text-sm: 17.5px;  --text-md: 20px;  --text-lg: 22.5px;
  --text-xl: 27.5px;  --text-2xl: 35px; --text-3xl: 45px;
  --text-4xl: 48px; --text-5xl: 64px; --text-6xl: 84px; --text-7xl: 108px;

  --leading-tight: 1.08;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-h1:     0.05em;   /* HEADER 01 — Romantic all-caps */
  --tracking-h3:     0.03em;   /* HEADER 03 — Source Sans italic */
  --tracking-normal: 0;
  --tracking-wider:  0.18em;
  --tracking-widest: 0.28em;

  --weight-light: 300; --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;

  /* Spacing / radius / shadow / motion ---------------------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --radius-xl: 0; --radius-2xl: 0; --radius-pill: 0; --radius-circle: 50%;

  --shadow-xs: 0 1px 2px rgba(14, 22, 32, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 22, 32, 0.08);
  --shadow-md: 0 6px 18px rgba(14, 22, 32, 0.10);
  --shadow-lg: 0 14px 36px rgba(14, 22, 32, 0.12);
  --shadow-xl: 0 28px 64px rgba(14, 22, 32, 0.14);
  --shadow-inset: inset 0 0 0 1px rgba(14, 22, 32, 0.12);

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1.0);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1.0);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-slower: 680ms;

  /* Layout */
  --max-width: 1240px;
  --max-width-wide: 1320px;
  --section-padding: 120px 40px;
}