/* ============================================================
   Trinity Skills Academy — Design Tokens
   colors_and_type.css
   ============================================================ */

/* ── Self-hosted: Cinzel Decorative ──────────────────────── */
/* latin-ext subset */
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/cinzel-decorative-latin-ext-400-normal.woff2') format('woff2'),
       url('./fonts/cinzel-decorative-latin-ext-400-normal.woff') format('woff');
  unicode-range: U+0100-02AF, U+0300-03FF, U+1E00-1EFF, U+2020, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/cinzel-decorative-latin-ext-700-normal.woff2') format('woff2'),
       url('./fonts/cinzel-decorative-latin-ext-700-normal.woff') format('woff');
  unicode-range: U+0100-02AF, U+0300-03FF, U+1E00-1EFF, U+2020, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/cinzel-decorative-latin-ext-900-normal.woff2') format('woff2'),
       url('./fonts/cinzel-decorative-latin-ext-900-normal.woff') format('woff');
  unicode-range: U+0100-02AF, U+0300-03FF, U+1E00-1EFF, U+2020, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin subset */
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/cinzel-decorative-latin-400-normal.woff2') format('woff2'),
       url('./fonts/cinzel-decorative-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/cinzel-decorative-latin-700-normal.woff2') format('woff2'),
       url('./fonts/cinzel-decorative-latin-700-normal.woff') format('woff');
}
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/cinzel-decorative-latin-900-normal.woff2') format('woff2'),
       url('./fonts/cinzel-decorative-latin-900-normal.woff') format('woff');
}

/* ── Self-hosted: Vintage Moon ───────────────────────────── */
@font-face {
  font-family: 'Vintage Moon';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Vintage_Moon_Regular.ttf') format('truetype');
}

/* ── Self-hosted: Montserrat ─────────────────────────────── */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:100; font-display:swap; src:url('./fonts/Montserrat-Thin.otf') format('opentype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:200; font-display:swap; src:url('./fonts/Montserrat-ExtraLight.otf') format('opentype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:300; font-display:swap; src:url('./fonts/Montserrat-Light.otf') format('opentype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/Montserrat-Regular.otf') format('opentype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/Montserrat-Medium.otf') format('opentype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url('./fonts/Montserrat-SemiBold.otf') format('opentype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url('./fonts/Montserrat-Bold.otf') format('opentype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap; src:url('./fonts/Montserrat-ExtraBold.otf') format('opentype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:900; font-display:swap; src:url('./fonts/Montserrat-Black.otf') format('opentype'); }

/* ── Self-hosted: Montserrat Alternates ──────────────────── */
@font-face { font-family:'Montserrat Alternates'; font-style:normal; font-weight:100; font-display:swap; src:url('./fonts/MontserratAlternates-Thin.otf') format('opentype'); }
@font-face { font-family:'Montserrat Alternates'; font-style:normal; font-weight:200; font-display:swap; src:url('./fonts/MontserratAlternates-ExtraLight.otf') format('opentype'); }
@font-face { font-family:'Montserrat Alternates'; font-style:normal; font-weight:300; font-display:swap; src:url('./fonts/MontserratAlternates-Light.otf') format('opentype'); }
@font-face { font-family:'Montserrat Alternates'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/MontserratAlternates-Regular.otf') format('opentype'); }
@font-face { font-family:'Montserrat Alternates'; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/MontserratAlternates-Medium.otf') format('opentype'); }
@font-face { font-family:'Montserrat Alternates'; font-style:normal; font-weight:600; font-display:swap; src:url('./fonts/MontserratAlternates-SemiBold.otf') format('opentype'); }
@font-face { font-family:'Montserrat Alternates'; font-style:normal; font-weight:700; font-display:swap; src:url('./fonts/MontserratAlternates-Bold.otf') format('opentype'); }
@font-face { font-family:'Montserrat Alternates'; font-style:normal; font-weight:800; font-display:swap; src:url('./fonts/MontserratAlternates-ExtraBold.otf') format('opentype'); }
@font-face { font-family:'Montserrat Alternates'; font-style:normal; font-weight:900; font-display:swap; src:url('./fonts/MontserratAlternates-Black.otf') format('opentype'); }

/* ── Base Color Palette ───────────────────────────────────── */
:root {
  /* Raw palette */
  --ink:         #0c0d07;   /* deep near-black, primary text        */
  --cream:       #e8ddcf;   /* warm parchment, primary background (Fläche) */
  --champagne:   #fff5b1;   /* pale gold highlight — gradient only, unchanged */
  --accent:      #4A1F26;   /* deep bordeaux (Akzent) — replaces former Lavender */
  --gold-mid:    #e5c05b;   /* mid gold — gradient stop only, unchanged     */
  --gold:        #dba402;   /* GRADIENT-ONLY — never a solid fill/text/border. Appears exclusively inside --gradient-gold* and logo art. Use --anchor for any solid gold use. */
  --gold-light:  #f0d068;   /* lighter gold for hover states        */
  --anchor:      #A88950;   /* primary solid brand color (Anker) — CTAs, buttons, borders, icons. NOT for body-text links on light bg (contrast ~2.5:1, fails AA) — use --accent for that. */
  --cream-dark:  #d6c9b7;   /* slightly deeper cream for borders    */
  --white:       #ffffff;
  --black:       #000000;

  /* Warm dark surface — for dark SECTION BACKGROUNDS (footer, header-on-scroll, dark bands, featured cards). Ink+Accent blend so dark areas read as part of the bordeaux family, not flat black. Never use for text color — use --ink for that. */
  --surface-dark: var(--ink); /* placeholder — restored to brand black pending new concept, see design plan */
  --gradient-dark-gold: linear-gradient(135deg, var(--surface-dark) 0%, color-mix(in srgb, var(--gold) 38%, var(--surface-dark) 62%) 100%);

  /* Accent derivatives — contrast-checked: --accent-on-dark reaches ~5.3:1 on --accent-bg-dark, ~5.8:1 on --ink (AA-safe for small text) */
  --accent-tint:      #f0eded;   /* light bordeaux tint — replaces lavender tint (backgrounds, soft wash) */
  --accent-bg-dark:   #2e1216;   /* dark badge/tag background ONLY (e.g. Hormone/Kinder badges) — never a full section background; use --ink for that */
  --accent-on-dark:   #c98d95;   /* lightened accent for text/icons on dark surfaces — contrast-checked: ~5.3:1 on --accent-bg-dark, ~5.8:1 on --ink (was #8a5a62 @ ~3.3:1, failed AA for small text) */

  /* ── Semantic Color Tokens ──────────────────────────────── */
  --color-text-primary:   var(--ink);
  --color-text-secondary: color-mix(in srgb, var(--ink) 68%, var(--cream) 32%);  /* derived from Ink, was flat #5a5748 */
  --color-text-muted:     color-mix(in srgb, var(--ink) 44%, var(--cream) 56%);  /* derived from Ink, was flat #8c8577 */
  --color-text-inverse:   var(--cream);
  --color-text-gold:      var(--anchor);
  --color-text-accent:    var(--accent);
  --color-text-link:      var(--accent);   /* AA-safe default link color on light bg (~10:1); --anchor reserved for hover accent + large/bold UI */

  --color-bg:             var(--cream);
  --color-bg-dark:        var(--ink);
  --color-bg-champagne:   var(--champagne);
  --color-bg-accent-tint: var(--accent-tint);   /* replaces former lavender tint */
  --color-bg-card:        #f2ece2;      /* slightly warmer card bg          */

  --color-primary:        var(--anchor);
  --color-primary-light:  var(--gold-mid);
  --color-primary-pale:   var(--champagne);
  --color-accent:         var(--accent);
  --color-accent-light:   var(--accent-tint);

  --color-border:         var(--cream-dark);
  --color-border-gold:    var(--anchor);
  --color-border-light:   rgba(232,221,207,0.6);

  /* ── Topic Colors (per instructor/subject) ───────────────────
     Each topic = Anchor (buttons/icons/large UI) + Akzent (text/
     links/underline, AA-safe on --cream) + Tönung (badge/tag
     background wash — a visible tint, not near-white).
     The shared Fläche (--cream) NEVER changes per topic — only
     these three swap. This keeps the whole site feeling like one
     academy with three subject-matter experts, not three sites. */

  /* Jeannine · Hormone */
  --topic-hormone-anchor: #A88950;
  --topic-hormone-accent: #4A1F26;
  --topic-hormone-tint:   #E9C9CC;

  /* Marina · Mentalcoaching */
  --topic-mental-anchor:  #8f86b8;
  --topic-mental-accent:  #3A2C52;
  --topic-mental-tint:    #DAD3EC;

  /* Nicole · Ernährung */
  --topic-nutrition-anchor: #7E9473;
  --topic-nutrition-accent: #2C4A32;
  --topic-nutrition-tint:   #D6E3CE;

  /* ── Status Colors ────────────────────────────────────────
     Universal system states — NOT tied to any topic/person.
     Each has a text/icon color (AA on --cream, ~4.5:1+) and a
     light background tint for badges/banners. */
  --status-success:      #3F7A45;   /* "Verfügbar" / success text & icons — ~4.6:1 on cream */
  --status-success-bg:   #DCEBD9;   /* success badge/banner background */
  --status-error:        #B3261E;   /* error text & icons — ~5.2:1 on cream */
  --status-error-bg:     #F5DAD8;   /* error badge/banner background */
  --status-warning:      #96660B;   /* warning text & icons — ~4.6:1 on cream */
  --status-warning-bg:   #F3E4C9;   /* warning badge/banner background */

  /* ── Gold Gradients ─────────────────────────────────────── */
  --gradient-gold:        linear-gradient(135deg, #fff5b1 0%, #e5c05b 40%, #dba402 100%); /* @kind color */
  --gradient-gold-h:      linear-gradient(90deg,  #fff5b1 0%, #e5c05b 45%, #dba402 100%); /* @kind color */
  --gradient-gold-subtle: linear-gradient(135deg, #f5edcc 0%, #e5c05b 100%); /* @kind color */
  --gradient-dark-gold:   linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--gold) 42%, var(--ink) 58%) 100%); /* @kind color */
  --gradient-cream:       linear-gradient(180deg, var(--cream) 0%, #f5ede0 100%);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:    0 2px  8px  rgba(12,13,7,0.06);
  --shadow-md:    0 4px  20px rgba(12,13,7,0.10);
  --shadow-lg:    0 8px  40px rgba(12,13,7,0.14);
  --shadow-gold:  0 4px  24px rgba(168,137,80,0.18);
  --shadow-gold-lg: 0 8px 40px rgba(168,137,80,0.24);

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    32px;
  --radius-pill:  999px;

  /* ── Spacing Scale ───────────────────────────────────────── */
  --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;

  /* ── Typography Families ─────────────────────────────────── */
  --font-display:      'Vintage Moon', 'Georgia', serif;          /* ✓ self-hosted — QUOTES ONLY: pull-quotes, testimonials, selected/highlighted sentences. Never headlines, hero copy, or nav — its casual script undercuts the brand's expert-led tone at that job. */
  --font-serif:        'Cinzel Decorative', serif;                /* ✓ self-hosted */
  --font-sans:         'Montserrat', 'Helvetica Neue', sans-serif;/* ✓ self-hosted */
  --font-sans-alt:     'Montserrat Alternates', 'Montserrat', sans-serif; /* ✓ self-hosted */
  --font-mono:         'Courier New', monospace;

  /* ── Type Scale ──────────────────────────────────────────── */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3.5rem;     /* 56px */
  --text-5xl:   5rem;       /* 80px */

  /* ── Line Heights ────────────────────────────────────────── */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-base:   1.6;
  --leading-loose:  1.8;

  /* ── Letter Spacing ──────────────────────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast:   150ms; /* @kind other */
  --duration-base:   300ms; /* @kind other */
  --duration-slow:   500ms; /* @kind other */
}

/* ── Semantic Type Styles ─────────────────────────────────── */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--color-text-primary);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
}

/* Quote — Vintage Moon, reserved for pull-quotes / testimonials /
   selected sentences. NOT a general display/headline style —
   use h1/.h1 (Cinzel Decorative) for headlines instead. */
.quote {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--text-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.quote-sm {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-base);
  color: var(--color-text-primary);
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-loose);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-base);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: var(--leading-base);
  color: var(--color-text-muted);
}

/* ── Utility: Gold Text ───────────────────────────────────── */
.text-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gold-flat {
  color: var(--anchor);
}

/* ── Utility: Category / Topic Label (Montserrat Alternates) ─
   The one place Montserrat Alternates is used: short topic/
   category labels ("Hormone", "Kinder", "Ernährung"...) — its
   geometric alternate glyphs give these a distinct identity
   from regular UI copy (which stays in Montserrat). */
.category-label {
  font-family: var(--font-sans-alt);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
}

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

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  text-decoration: underline;
  color: var(--anchor);
}

/* ── Utility: Topic Theming ───────────────────────────────
   Apply data-topic to a section/card to swap Anchor/Akzent/
   Tönung for that subject area. Fläche (background) is
   intentionally untouched — see token block above. Usage:
   <section data-topic="hormone">…</section>
   Inside it: .topic-btn, .topic-link, .topic-badge read the
   scoped custom properties below. */
[data-topic] {
  --topic-anchor: var(--anchor);
  --topic-accent: var(--accent);
  --topic-tint:   var(--accent-tint);
}
[data-topic="hormone"] {
  --topic-anchor: var(--topic-hormone-anchor);
  --topic-accent: var(--topic-hormone-accent);
  --topic-tint:   var(--topic-hormone-tint);
}
[data-topic="mental"] {
  --topic-anchor: var(--topic-mental-anchor);
  --topic-accent: var(--topic-mental-accent);
  --topic-tint:   var(--topic-mental-tint);
}
[data-topic="nutrition"] {
  --topic-anchor: var(--topic-nutrition-anchor);
  --topic-accent: var(--topic-nutrition-accent);
  --topic-tint:   var(--topic-nutrition-tint);
}

.topic-btn {
  display: inline-block;
  background: var(--topic-anchor);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.topic-link {
  color: var(--topic-accent);
  font-weight: 600;
  text-decoration: underline;
}

.topic-badge {
  display: inline-block;
  background: var(--topic-tint);
  color: var(--topic-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}

/* ── Utility: Status Badges ───────────────────────────────
   System states, independent of topic theming. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}
.status-badge.success { background: var(--status-success-bg); color: var(--status-success); }
.status-badge.error   { background: var(--status-error-bg);   color: var(--status-error); }
.status-badge.warning { background: var(--status-warning-bg); color: var(--status-warning); }