/* =========================================================
   ausdauerclub — Design Tokens
   Colors + Typography
   ========================================================= */

/* Google Fonts — Lilita One + Roboto (Special Elite is self-hosted below) */

/* Self-hosted brand font */
@font-face {
  font-family: "Special Elite";
  src: url("../fonts/SpecialElite-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------
     BRAND PALETTE
     Source: _ausdauerFACTORY 2023 brand palette
     -------------------------------------------------------- */
  --ac-weinrot:      #800032;  /* primary — "Weinrot" */
  --ac-creme:        #faf3ed;  /* light background */
  --ac-orange:       #f26919;  /* accent / energy */
  --ac-anthrazit:    #444444;  /* body text / neutral dark */
  --ac-magenta:      #bc3874;  /* accent — secondary warm */
  --ac-petrol:       #68a2b9;  /* accent — cool */

  /* Neutrals (derived, complementary to the brand creme) */
  --ac-black:        #1a1a1a;
  --ac-ink:          #2b2b2b;
  --ac-graphite:     #6b6b6b;
  --ac-stone:        #a9a9a9;
  --ac-mist:         #d8d2cc;
  --ac-paper:        #fdfaf6;
  --ac-white:        #ffffff;

  /* --------------------------------------------------------
     SEMANTIC COLOR ROLES
     -------------------------------------------------------- */
  --bg:              var(--ac-creme);
  --bg-alt:          var(--ac-paper);
  --bg-inverse:      var(--ac-weinrot);
  --surface:         var(--ac-white);
  --surface-sunk:    #f3ece4;

  --fg:              var(--ac-anthrazit);  /* primary body color */
  --fg-strong:       var(--ac-black);
  --fg-muted:        var(--ac-graphite);
  --fg-on-brand:     var(--ac-creme);

  --brand:           var(--ac-weinrot);
  --brand-hover:     #66002a;   /* ~10% darker */
  --brand-press:     #4d001f;   /* ~20% darker */
  --brand-soft:      #f3dde3;   /* tint for backgrounds */

  --accent-warm:     var(--ac-orange);
  --accent-magenta:  var(--ac-magenta);
  --accent-cool:     var(--ac-petrol);

  --border:          #e6ded5;
  --border-strong:   #c9bfb3;
  --focus-ring:      color-mix(in oklab, var(--ac-weinrot) 60%, transparent);

  --success:         #2f8f5c;
  --warning:         #d98617;
  --danger:          #b23a3a;
  --info:            var(--ac-petrol);

  /* --------------------------------------------------------
     TYPOGRAPHY — FAMILIES
     -------------------------------------------------------- */
  --font-display:  "Lilita One", "Impact", "Arial Black", sans-serif;   /* H1 / hero */
  --font-accent:   "Special Elite", "Courier New", monospace;           /* Subheads / eyebrows */
  --font-body:     "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", "Menlo", Consolas, monospace;

  /* --------------------------------------------------------
     TYPE SCALE (rem-ish px)
     Weinrot headlines are LOUD — use generous sizes.
     -------------------------------------------------------- */
  --fs-display: 72px;
  --fs-h1:      56px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-lg:      20px;
  --fs-base:    17px;
  --fs-sm:      15px;
  --fs-xs:      13px;
  --fs-eyebrow: 14px;

  /* Line heights */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.14em;

  /* --------------------------------------------------------
     SPACING  (8pt-ish)
     -------------------------------------------------------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;

  /* --------------------------------------------------------
     RADII
     -------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* --------------------------------------------------------
     ELEVATION
     Subtle, warm — we avoid blue-black shadows.
     -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(68, 0, 27, 0.06);
  --shadow-sm: 0 2px 6px rgba(68, 0, 27, 0.08);
  --shadow-md: 0 8px 20px rgba(68, 0, 27, 0.10);
  --shadow-lg: 0 18px 44px rgba(68, 0, 27, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  /* --------------------------------------------------------
     MOTION
     -------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot for athletic feel */
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;
}

/* =========================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply these by using the class .ac or scoping body { ... }
   ========================================================= */

.ac, body.ac, body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ac h1, .ac-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand);
  
  margin: 0 0 var(--sp-5);
}

.ac h2, .ac-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  
  margin: 0 0 var(--sp-4);
}

.ac h3, .ac-h3 {
  font-family: var(--font-accent);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}

.ac h4, .ac-h4 {
  font-family: var(--font-accent);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}

.ac-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand);
  
}

.ac-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

.ac p, .ac-p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.ac small, .ac-small {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.ac code, .ac-code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--surface-sunk);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--brand);
}

.ac a, .ac-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
.ac a:hover, .ac-link:hover { color: var(--brand-hover); }