/* =========================================================================
   AURELIA ATHLETES · DESIGN TOKENS
   Brand Identity & Communications Guide · v2 · 2026
   Tagline: Illuminating her.
   Editorial restraint with iridescent atmospheres.
   ========================================================================= */

/* ---- Fonts (free via Google Fonts) -------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

:root {
  /* ---- COLOR · Foundation -------------------------------------------- */
  --obsidian:        #1A1613;   /* primary ground · ink */
  --bone:            #F2EBDF;   /* primary light ground · paper */
  --ink-surface:     #332A24;   /* tonal surface, one step up from obsidian */

  /* ---- COLOR · Signature --------------------------------------------- */
  --aurum:           #C9A24A;   /* the full stop · accent only · 2% */
  --aurum-warm:      #E4C277;   /* warm gold for atmospheres + accents */

  /* ---- COLOR · Energy ------------------------------------------------ */
  --sapphire:        #1E3A8A;   /* editorial energy */
  --sapphire-bright: #3B5BDB;   /* digital accent */
  --orchid-deep:     #8E2C73;   /* campaign energy */
  --orchid:          #C77DBA;   /* soft accent */
  --rose:            #F2A6C7;   /* softest accent */

  /* ---- COLOR · Semantic foreground ----------------------------------- */
  --fg-1:            var(--bone);              /* primary text on dark */
  --fg-2:            rgb(242 235 223 / 0.72);  /* secondary text on dark */
  --fg-3:            rgb(242 235 223 / 0.48);  /* tertiary / metadata */
  --fg-rule:         rgb(242 235 223 / 0.16);  /* hairlines on dark */
  --fg-accent:       var(--aurum);

  --ink-1:           var(--obsidian);          /* primary text on light */
  --ink-2:           rgb(26 22 19 / 0.68);     /* secondary text on light */
  --ink-3:           rgb(26 22 19 / 0.44);     /* tertiary / metadata */
  --ink-rule:        rgb(26 22 19 / 0.14);     /* hairlines on light */

  /* ---- COLOR · Semantic backgrounds ---------------------------------- */
  --bg-default:      var(--obsidian);
  --bg-paper:        var(--bone);
  --bg-surface:      var(--ink-surface);

  /* ---- Iridescent atmospheres · BACKGROUND ONLY ---------------------- */
  --atmos-sunset:    linear-gradient(135deg, #E4C277 0%, #F2A6C7 48%, #8E2C73 100%);
  --atmos-twilight:  linear-gradient(135deg, #8E2C73 0%, #1E3A8A 100%);
  --atmos-aurora:    linear-gradient(135deg, #E4C277 0%, #F2A6C7 28%, #C77DBA 50%, #3B5BDB 78%, #1A1613 100%);
  --atmos-nightfall: linear-gradient(160deg, #8E2C73 0%, #1E3A8A 55%, #332A24 100%);
  --atmos-dawn:      linear-gradient(135deg, #F2A6C7 0%, #C77DBA 50%, #1E3A8A 100%);

  /* ---- TYPE · Families ----------------------------------------------- */
  --font-display: 'DM Serif Display', 'Times New Roman', Georgia, serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- TYPE · 9-step scale (sizes / line-height / tracking) ---------- */
  --t-hero-size: 128px;     --t-hero-lh: 0.88;  --t-hero-track: -0.035em;
  --t-d1-size:    72px;     --t-d1-lh:   0.92;  --t-d1-track:   -0.030em;
  --t-d2-size:    48px;     --t-d2-lh:   1.00;  --t-d2-track:   -0.025em;
  --t-title-size: 32px;     --t-title-lh:1.05;  --t-title-track:-0.020em;
  --t-sub-size:   24px;     --t-sub-lh:  1.35;  --t-sub-track:  -0.010em;
  --t-lede-size:  18px;     --t-lede-lh: 1.55;
  --t-body-size:  15px;     --t-body-lh: 1.65;
  --t-cap-size:   13px;     --t-cap-lh:  1.55;
  --t-mono-size:  11px;     --t-mono-lh: 1.50;  --t-mono-track:  0.18em;

  /* ---- SPACING (8pt + a fine 4pt step) ------------------------------- */
  --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 · restrained -------------------------------------------- */
  --r-0:  0px;     /* editorial default */
  --r-sm: 2px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* ---- ELEVATION · ink-tinted, low contrast -------------------------- */
  --shadow-1: 0 1px 0 rgba(26,22,19,0.06);
  --shadow-2: 0 4px 16px -6px rgba(26,22,19,0.18);
  --shadow-3: 0 24px 48px -16px rgba(26,22,19,0.32);
  --inset-rule: inset 0 -1px 0 rgba(242,235,223,0.12);

  /* ---- MOTION · slow + controlled ------------------------------------ */
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-rise:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-med:  280ms;
  --dur-slow: 520ms;

  /* ---- LAYOUT · grid -------------------------------------------------- */
  --gutter: 24px;
  --max-w-prose:     640px;
  --max-w-content:   960px;
  --max-w-wide:     1280px;
  --max-w-full:     1440px;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY
   Use these classes; never improvise sizes.
   ========================================================================= */

.t-hero {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: var(--t-hero-size); line-height: var(--t-hero-lh); letter-spacing: var(--t-hero-track);
}
.t-display-1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-d1-size); line-height: var(--t-d1-lh); letter-spacing: var(--t-d1-track);
}
.t-display-2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-d2-size); line-height: var(--t-d2-lh); letter-spacing: var(--t-d2-track);
}
.t-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-title-size); line-height: var(--t-title-lh); letter-spacing: var(--t-title-track);
}
.t-subhead {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--t-sub-size); line-height: var(--t-sub-lh); letter-spacing: var(--t-sub-track);
}
.t-lede {
  font-family: var(--font-sans); font-weight: 300;
  font-size: var(--t-lede-size); line-height: var(--t-lede-lh);
}
.t-body {
  font-family: var(--font-sans); font-weight: 300;
  font-size: var(--t-body-size); line-height: var(--t-body-lh);
}
.t-caption {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--t-cap-size); line-height: var(--t-cap-lh);
}
.t-mono,
.t-eyebrow {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--t-mono-size); line-height: var(--t-mono-lh);
  letter-spacing: var(--t-mono-track); text-transform: uppercase;
}

/* The signature glyph — italic gold full stop. Apply to a trailing "." */
.aurelia-stop {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--aurum);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; }
h1 { font-size: var(--t-d1-size); line-height: var(--t-d1-lh); letter-spacing: var(--t-d1-track); }
h2 { font-size: var(--t-d2-size); line-height: var(--t-d2-lh); letter-spacing: var(--t-d2-track); }
h3 { font-size: var(--t-title-size); line-height: var(--t-title-lh); letter-spacing: var(--t-title-track); }
h4 { font-family: var(--font-sans); font-size: var(--t-sub-size); line-height: var(--t-sub-lh); letter-spacing: var(--t-sub-track); }
p  { font-family: var(--font-sans); font-weight: 300; font-size: var(--t-body-size); line-height: var(--t-body-lh); }

/* =========================================================================
   ATMOSPHERE UTILITY CLASSES (background-only — never on type)
   ========================================================================= */
.atmos-sunset    { background: var(--atmos-sunset); }
.atmos-twilight  { background: var(--atmos-twilight); }
.atmos-aurora    { background: var(--atmos-aurora); }
.atmos-nightfall { background: var(--atmos-nightfall); }
.atmos-dawn      { background: var(--atmos-dawn); }