/* Canonical colors_and_type.css tokens and type roles; local fonts supplied by site-frame.css. */
:root {
  /* ─── Color · Brand core ─────────────────────────────────────────────── */
  --c-gold:            #D4AF37;   /* High value · accents · CTAs · titles on dark */
  --c-gold-hover:      #C4A030;   /* Hover · prayer text · muted gold */
  --c-gold-soft:       rgba(212, 175, 55, 0.40);  /* Hairline separators */
  --c-gold-glow:       rgba(212, 175, 55, 0.15);  /* Halo / glow */

  --c-navy-900:        #0A2540;   /* Header gradient start · CTA text on gold */
  --c-navy-700:        #1E3A5F;   /* Section headers · CTA secondary bg */
  --c-navy-500:        #1F4788;   /* Footer · "footer blue" */
  --c-navy-200:        rgba(10, 37, 64, 0.06);    /* Soft borders */

  /* ─── Color · Surfaces ───────────────────────────────────────────────── */
  --c-paper:           #FAFAF8;   /* Page bg · prayer block bg · parchment */
  --c-white:           #FFFFFF;   /* Cards · body block bg */

  /* ─── Color · Ink (text on light) ────────────────────────────────────── */
  --c-ink:             #1A1A1A;   /* Body headings · signatures · bold instructions */
  --c-ink-soft:        #2C2A28;   /* Default paragraph color */
  --c-ink-muted:       #6B6B6B;   /* Secondary copy · field labels */

  /* ─── Color · Ink (text on dark) ─────────────────────────────────────── */
  --c-ink-on-dark:           #FFFFFF;
  --c-ink-on-dark-soft:      rgba(255, 255, 255, 0.82);
  --c-ink-on-dark-muted:     rgba(255, 255, 255, 0.60);
  --c-ink-on-dark-quiet:     rgba(255, 255, 255, 0.32);

  /* ─── Color · Legacy / unused (kept for reference) ───────────────────── */
  /*  --c-maroon was rejected for dark-mode contrast; do NOT use as text. */
  --c-maroon-archival: #762727;

  /* ─── Color · Status ─────────────────────────────────────────────────── */
  --c-error:           #C0392B;
  --c-success:         #27AE60;
  --c-rule:            #E5E5E0;   /* Hairline / divider on light */

  /* ─── Color · Podcast platforms ──────────────────────────────────────── */
  --c-youtube:         #FF0000;
  --c-spotify:         #1DB954;
  --c-apple-podcast:   #9933CC;

  /* ─── Color · Semantic aliases (use these in components) ─────────────── */
  --bg-page:           var(--c-paper);
  --bg-card:           var(--c-white);
  --bg-prayer:         var(--c-paper);
  --bg-section-dark:   var(--c-navy-700);
  --bg-header-grad:    linear-gradient(180deg, var(--c-navy-900) 0%, var(--c-navy-700) 100%);
  --bg-footer:         var(--c-navy-500);

  --fg-default:        var(--c-ink-soft);
  --fg-strong:         var(--c-ink);
  --fg-muted:          var(--c-ink-muted);
  --fg-accent:         var(--c-gold);
  --fg-on-dark:        var(--c-ink-on-dark);

  --border-soft:       1px solid var(--c-navy-200);
  --border-gold:       1px solid var(--c-gold-soft);

  /* ─── Typography · Families ──────────────────────────────────────────── */
  --font-display:      'Cinzel', Georgia, 'Times New Roman', serif;
  --font-display-deco: 'Cinzel Decorative', 'Cinzel', Georgia, serif; /* legacy hero only */
  --font-heading:      'Marcellus', Georgia, serif;
  --font-heading-sc:   'Marcellus SC', 'Marcellus', Georgia, serif;   /* small-caps emphasis */
  --font-body:         'Mulish', Arial, Helvetica, sans-serif;
  --font-body-alt:     'Nunito', 'Mulish', Arial, sans-serif;          /* alt humanist body */
  --font-credits:      'Rubik', Arial, sans-serif;

  /* ─── Typography · Weights ──────────────────────────────────────────── */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;

  /* ─── Typography · Tracking (letter-spacing) ────────────────────────── */
  /* Tracking is part of Transcendance's identity — title labels are
     widely tracked, body is normal, decorative labels can go to 8px. */
  --track-tight:   0.5px;
  --track-normal:  1px;
  --track-wide:    2px;
  --track-x-wide:  3px;
  --track-mega:    5px;   /* "✦ LETTRE DU MOIS ✦" */
  --track-ultra:   7px;   /* "NEWSLETTER" */
  --track-club:    8px;   /* "CLUB" */

  /* ─── Type Scale (desktop) ──────────────────────────────────────────── */
  --fs-xs:       11px;
  --fs-sm:       13px;
  --fs-base:     16px;
  --fs-md:       18px;
  --fs-lg:       20px;
  --fs-xl:       24px;
  --fs-2xl:      30px;
  --fs-3xl:      38px;
  --fs-4xl:      52px;

  --lh-tight:    1.2;
  --lh-snug:     1.4;
  --lh-normal:   1.6;
  --lh-relaxed:  1.85;
  --lh-prose:    1.75;

  /* ─── Spacing (8px base) ────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ─── Radii ─────────────────────────────────────────────────────────── */
  /* Email components use 2–4px (CTA), 8px (cards). The website uses 8–16px
     for cards and 50px (pill) for podcast chips. */
  --r-none:   0;
  --r-xs:     2px;   /* CTA email */
  --r-sm:     4px;   /* Platform buttons */
  --r-md:     8px;   /* Cards · primary buttons */
  --r-lg:     16px;  /* Coach photo · podcast cover · result card */
  --r-pill:   999px; /* Podcast chips */

  /* ─── Shadows ───────────────────────────────────────────────────────── */
  /* Shadows are NAVY-tinted, not neutral grey. Always use the navy tint. */
  --shadow-soft:    0 2px 16px rgba(10, 37, 64, 0.06);
  --shadow-medium:  0 4px 24px rgba(10, 37, 64, 0.10);
  --shadow-strong:  0 8px 40px rgba(10, 37, 64, 0.14);
  --shadow-podcast: 0 4px 24px rgba(10, 37, 64, 0.18);

  /* ─── Motion ────────────────────────────────────────────────────────── */
  --tx:          0.3s ease;
  --tx-fast:     0.15s ease;
  --tx-slow:     0.6s ease;

  /* ─── Layout ────────────────────────────────────────────────────────── */
  --container-narrow:  680px;   /* article, legal page */
  --container:         900px;   /* about, podcast */
  --container-wide:    1100px;  /* nav, footer */
  --container-email:   600px;   /* email + club portal column */
}

/* ─── Base reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Semantic typography roles ────────────────────────────────────────── */
/* Use these classes whenever possible — they keep type consistent across
   pages. */

.t-display {
  /* Hero page title on jeanlucstachura.com — only place Cinzel Decorative
     is used. */
  font-family: var(--font-display-deco);
  font-weight: var(--w-bold);
  font-size: var(--fs-3xl);
  letter-spacing: var(--track-x-wide);
  line-height: var(--lh-tight);
  color: var(--c-gold);
}

.t-h1 {
  /* TRANSCENDANCE wordmark — newsletter + club hero. */
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-3xl);
  letter-spacing: var(--track-x-wide);
  line-height: var(--lh-tight);
  color: var(--c-gold);
}

.t-h2 {
  /* Section h2 (gold on navy). */
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-xl);
  letter-spacing: var(--track-wide);
  line-height: var(--lh-tight);
  color: var(--c-gold);
}

.t-h3 {
  /* Sub-heading on light bg. */
  font-family: var(--font-heading);
  font-weight: var(--w-regular);
  font-size: var(--fs-lg);
  color: var(--fg-strong);
  line-height: var(--lh-snug);
}

.t-eyebrow {
  /* "✦ LETTRE DU MOIS ✦" / "NEWSLETTER" / "CLUB" */
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--track-mega);
  color: var(--c-gold);
}

.t-subtitle {
  /* Italic gold or off-white-italic subtitle under h2. */
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 15px;
  line-height: var(--lh-prose);
  color: var(--c-ink-on-dark-soft);
}

.t-signature {
  /* "Jean-Luc Stachura" — letter sign-off. */
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  color: var(--c-navy-700);
  letter-spacing: var(--track-tight);
}

.t-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
}

.t-prayer {
  /* Marcellus italic, gold-muted, centered, between gold rails. */
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-gold-hover);
  text-align: center;
}

.t-instruction {
  /* Bold call-out instruction on light bg. */
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--c-navy-700);
  text-align: center;
}

.t-label {
  /* Form labels — uppercase, tracked, muted. */
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--fg-muted);
}

.t-cta {
  /* Button label — uppercase, tracked. */
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--track-x-wide);
}

.t-credit {
  /* Footer credits / copyright. */
  font-family: var(--font-credits);
  font-size: 12px;
  color: var(--c-ink-on-dark-quiet);
  letter-spacing: var(--track-tight);
}