/* ==========================================================================
   ADORE RADIO — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   Import this at the top of any HTML file:
   <link rel="stylesheet" href="colors_and_type.css" />
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* ---------- Raw color ramps ------------------------------------------ */

  /* Forest green (primary) */
  --green-900: #141B0C;
  --green-800: #1B2410;
  --green-700: #283618;   /* brand anchor */
  --green-600: #3D5028;
  --green-500: #556B3C;
  --green-400: #6F855A;
  --green-300: #8A9A7B;
  --green-200: #B3BEA6;
  --green-100: #D5DBCB;
  --green-050: #ECEFE6;

  /* Cream / paper (warm neutrals) */
  --cream-900: #3D382C;
  --cream-700: #6B634F;
  --cream-500: #A89E85;
  --cream-300: #D6CDB5;
  --cream-200: #EDE6D3;
  --cream-100: #F5F1E8;
  --cream-050: #FAF7F0;
  --cream-000: #FFFDF7;

  /* Accent warm (gold / blush — sparingly) */
  --gold-700: #9A7F3F;
  --gold-500: #C9A961;
  --gold-300: #E4CC95;
  --blush-500: #D9B8A3;
  --blush-300: #ECD6C5;

  /* Signal (used very rarely — preserve reverence) */
  --live-red: #C94F4F;        /* the "on air" dot, only here */
  --success: #6F855A;         /* reuses green-400 */
  --warn:    #C9A961;         /* reuses gold */
  --error:   #B34A3A;

  /* ---------- Semantic tokens (prefer these in components) ------------- */

  /* Surfaces */
  --bg-page:       var(--cream-100);
  --bg-elevated:   var(--cream-050);
  --bg-sunken:     var(--cream-200);
  --bg-inverse:    var(--green-700);
  --bg-inverse-elevated: var(--green-600);

  /* Ink (foreground) */
  --fg-1:          var(--green-700);   /* primary text on cream */
  --fg-2:          var(--green-600);   /* secondary text */
  --fg-3:          var(--green-300);   /* tertiary / meta */
  --fg-disabled:   rgba(40, 54, 24, 0.35);
  --fg-on-inverse-1: var(--cream-050);
  --fg-on-inverse-2: var(--cream-300);
  --fg-on-inverse-3: var(--green-200);

  /* Borders */
  --border-1:      var(--cream-200);
  --border-2:      var(--cream-300);
  --border-inverse: rgba(245, 241, 232, 0.12);
  --border-focus:  var(--gold-500);

  /* Accents */
  --accent:        var(--gold-500);
  --accent-ink:    var(--gold-700);

  /* ---------- Type families ------------------------------------------- */

  --font-display: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------------------------------------------- */

  --fs-display:  clamp(3rem, 6vw, 5rem);   /* 48–80 */
  --fs-h1:       clamp(2.25rem, 4vw, 3.5rem); /* 36–56 */
  --fs-h2:       clamp(1.75rem, 2.6vw, 2.25rem); /* 28–36 */
  --fs-h3:       1.5rem;    /* 24 */
  --fs-h4:       1.25rem;   /* 20 */
  --fs-lg:       1.125rem;  /* 18 */
  --fs-base:     1rem;      /* 16 */
  --fs-sm:       0.875rem;  /* 14 */
  --fs-xs:       0.75rem;   /* 12 */

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-body:     1.55;
  --lh-loose:    1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow: 0.18em;

  /* ---------- Spacing scale ------------------------------------------- */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii --------------------------------------------------- */

  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------- Shadows ------------------------------------------------- */

  --shadow-soft:  0 4px 16px rgba(40, 54, 24, 0.06), 0 1px 2px rgba(40, 54, 24, 0.04);
  --shadow-lift:  0 12px 32px rgba(40, 54, 24, 0.10), 0 2px 4px rgba(40, 54, 24, 0.05);
  --shadow-hero:  0 24px 64px rgba(40, 54, 24, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 253, 247, 0.05);
  --shadow-focus: 0 0 0 2px var(--bg-page), 0 0 0 4px rgba(201, 169, 97, 0.6);

  /* ---------- Motion -------------------------------------------------- */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);

  --dur-fast:   150ms;
  --dur-med:    280ms;
  --dur-slow:   500ms;
  --dur-xslow:  800ms;

  /* ---------- Layout -------------------------------------------------- */

  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --player-h:     80px;
}

/* ============================================================
   Semantic type primitives — use as utility classes OR copy into
   your own component styles. Everything here sits on --fg-1 by default.
   ============================================================ */

.display, .h0 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.body, p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.meta, .caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}

/* Eyebrow — tiny, wide-tracked all-caps label */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Scripture / pull quote — serif */
.scripture, blockquote.scripture {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  letter-spacing: 0.005em;
}

.scripture cite, .scripture .attrib {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Wordmark — for recreating "ADORE RADIO" in text */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  color: var(--fg-1);
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
}

/* ============================================================
   Baseline resets — only the bits components rely on
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-600); }

img { max-width: 100%; display: block; }

::selection { background: var(--green-700); color: var(--cream-050); }

/* Utility: sr-only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}