/* ============================================================
   MONARCH — Design Foundations
   Dark mode only. Editorial luxury. Earned, not bought.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond.ttf") format("truetype");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
/* Mono is loaded via Google Fonts in each HTML head:
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   SUBSTITUTION: no mono file was provided. JetBrains Mono stands in for SF Mono. */

:root {
  /* ---------- Type families ---------- */
  --font-serif: "EB Garamond", "New York", Georgia, "Times New Roman", serif;
  --font-sans:  "Manrope", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", ui-monospace, "Roboto Mono", monospace;

  /* ============================================================
     COLOR
     ============================================================ */

  /* Surfaces — near-black, never flat pure black */
  --ink:            #0F0F0F;  /* default page background ("ink") */
  --surface:        #171717;  /* standard card fill */
  --surface-warm:   #161513;  /* premium / Reserve card fill — warm black, not brown */
  --surface-raised: #1E1E1E;  /* hovered / raised surface */

  /* Reserve warm gradient — "candlelight in a dark room" */
  --cognac:   #593419;  /* deep cognac (top) */
  --treacle:  #2E1A08;  /* dark treacle (middle) */
  --warm-black:#150A03;  /* near-black with warmth (bottom) */
  --reserve-gradient: linear-gradient(180deg, #593419 0%, #2E1A08 52%, #150A03 100%);
  --reserve-radial: radial-gradient(120% 90% at 18% 8%, rgba(89,52,25,0.55) 0%, rgba(46,26,8,0.0) 55%);

  /* The metal — SILVER is the signature, not gold */
  --silver-sweep: linear-gradient(90deg,#3A3A3A 0%,#8E8D8D 22%,#EAEAEA 42%,#F4F4F4 50%,#EAEAEA 58%,#8E8D8D 78%,#3A3A3A 100%);
  --silver-sweep-diagonal: linear-gradient(135deg,#3A3A3A 0%,#8E8D8D 22%,#EAEAEA 42%,#F4F4F4 50%,#EAEAEA 58%,#8E8D8D 78%,#3A3A3A 100%);
  --silver-flat:  #CCCFD9;  /* solid silver for icons, checkmarks, toggle tints */

  /* Warm gold — accent only, never dominant (<5% of any layout) */
  --gold:        #FFB830;  /* eyebrow labels, status pulse, brand moments */
  --gold-soft:   #FAC74D;  /* warm amber (also warning semantic) */
  --gold-glow:   rgba(255,184,48,0.14);

  /* Text — white at descending opacity */
  --fg-1: rgba(255,255,255,1.00);  /* primary */
  --fg-2: rgba(255,255,255,0.62);  /* secondary */
  --fg-3: rgba(255,255,255,0.42);  /* tertiary */
  --fg-4: rgba(255,255,255,0.28);  /* muted */

  /* Hairlines & borders */
  --hairline:      rgba(255,255,255,0.08);
  --hairline-2:    rgba(255,255,255,0.14);
  --border-silver: linear-gradient(135deg,rgba(234,234,234,0.55),rgba(142,141,141,0.18),rgba(234,234,234,0.45));
  --border-gold:   rgba(255,184,48,0.45);

  /* Semantic — change indicators & destructive only */
  --positive: #5CC77A;  /* muted green — positive deltas */
  --negative: #E55952;  /* muted red — negative deltas / destructive */
  --warning:  #FAC74D;  /* warm amber — warnings */

  /* ============================================================
     SHADOW & ELEVATION — heavy but quiet
     ============================================================ */
  --shadow-card:    0 12px 28px rgba(0,0,0,0.32);
  --shadow-reserve: 0 12px 28px rgba(0,0,0,0.32), 0 18px 60px rgba(89,52,25,0.10);
  --shadow-float:   0 18px 48px rgba(0,0,0,0.45);

  /* ============================================================
     RADII
     ============================================================ */
  --r-card:   20px;
  --r-pass:   20px;   /* the membership pass */
  --r-field:  12px;
  --r-pill:   999px;  /* capsule buttons */

  /* ============================================================
     SPACING — 4pt base
     ============================================================ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;   /* default card interior padding */
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px; /* section rhythm on the site */

  /* ---------- Type scale (px) ---------- */
  --t-hero:    40px;  /* serif regular */
  --t-section: 28px;  /* serif regular */
  --t-headline:22px;  /* serif regular */
  --t-body-serif: 17px;
  --t-body:    15px;  /* sans */
  --t-button:  17px;  /* sans semibold */
  --t-caption: 13px;  /* sans */
  --t-eyebrow: 11px;  /* sans semibold uppercase, gold */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
.mon-hero {
  font-family: var(--font-serif);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.mon-section-title {
  font-family: var(--font-serif);
  font-size: var(--t-section);
  font-weight: 400;
  line-height: 1.12;
  color: var(--fg-1);
}
.mon-headline {
  font-family: var(--font-serif);
  font-size: var(--t-headline);
  font-weight: 400;
  line-height: 1.2;
  color: var(--fg-1);
}
.mon-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-2);
}
.mon-body-serif {
  font-family: var(--font-serif);
  font-size: var(--t-body-serif);
  line-height: 1.6;
  color: var(--fg-2);
}
.mon-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  color: var(--fg-3);
}
/* The signature pattern — eyebrow label */
.mon-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;   /* ~2px at 11px */
  color: var(--gold);
}
/* Numbers — the soul of a fitness app. Always mono. */
.mon-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- Silver text / mark helper ---------- */
.mon-silver-text {
  background: var(--silver-sweep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}