/* =============================================================================
   ABC-on Design Tokens
   Visual Refresh 2026 — Boutique Standard
   Schriften: Geist Sans (variable) + Instrument Serif Italic (Display-Akzent)
   ============================================================================= */

/* ===== Font-Face ============================================================ */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-variable.woff2') format('woff2-variations'),
       url('../fonts/geist-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ===== Tokens =============================================================== */

:root {
  /* ---- Primitive Color Tokens (OKLCH) ----
     OKLCH ist perzeptuell linear, future-proof, mixt sauber via color-mix().
     Petrol und Bernstein bleiben Brand. Bernstein darf NICHT auf Weiss als
     Body-Text — Kontrast 3.4:1 ist unter WCAG AA. Nur als Fläche oder Akzent. */

  --petrol:        oklch(43% 0.045 215);   /* #1a5c6b */
  --petrol-dark:   oklch(36% 0.045 215);   /* #134a56 */
  --petrol-darker: oklch(28% 0.045 215);   /* tiefer für Headlines auf Hell */

  --bernstein:     oklch(72% 0.16 75);     /* #d4920b */
  --bernstein-dark: oklch(58% 0.16 75);    /* für Hover */

  /* Petrol-Tints via color-mix (perzeptuell harmonisch) */
  --petrol-50:  color-mix(in oklch, var(--petrol), white 95%);
  --petrol-100: color-mix(in oklch, var(--petrol), white 88%);
  --petrol-200: color-mix(in oklch, var(--petrol), white 75%);

  /* Bernstein-Tint nur als Hintergrund-Fläche, nie für Body-Text */
  --bernstein-50:  color-mix(in oklch, var(--bernstein), white 92%);

  /* Neutrals — warm getönt damit sie zu Petrol passen */
  --grey-50:  oklch(98% 0.003 80);
  --grey-100: oklch(96% 0.005 80);
  --grey-200: oklch(91% 0.006 80);
  --grey-300: oklch(83% 0.007 80);
  --grey-400: oklch(70% 0.008 80);
  --grey-500: oklch(56% 0.008 80);
  --grey-600: oklch(42% 0.008 80);
  --grey-700: oklch(30% 0.007 80);
  --grey-800: oklch(28% 0.005 80);
  --grey-900: oklch(20% 0.005 80);

  /* ---- Semantic Color Tokens ---- */
  --color-bg-base:        var(--grey-50);
  --color-bg-surface:     #ffffff;
  --color-bg-emphasis:    var(--petrol);
  --color-bg-accent-soft: var(--petrol-50);

  --color-text-emphasis: var(--grey-900);
  --color-text-default:  var(--grey-800);
  --color-text-muted:    var(--grey-600);
  --color-text-faint:    var(--grey-500);
  --color-text-on-dark:  white;
  --color-text-link:     var(--petrol);
  --color-text-link-hover: var(--petrol-dark);

  --color-border-subtle:  var(--grey-200);
  --color-border-default: var(--grey-300);
  --color-border-strong:  var(--grey-700);

  --color-accent: var(--bernstein);

  /* ---- Spacing Scale (8px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Type Scale (fluid, clamp-basiert, modulare Skala 1.25 / Major Third) ---- */
  --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;

  --text-xs:    clamp(12px, 0.75rem + 0.05vw, 13px);
  --text-sm:    clamp(13px, 0.8rem + 0.1vw, 14px);
  --text-base:  clamp(16px, 1rem + 0.15vw, 18px);
  --text-lg:    clamp(18px, 1.05rem + 0.25vw, 20px);
  --text-xl:    clamp(20px, 1.15rem + 0.3vw, 24px);
  --text-2xl:   clamp(22px, 1.25rem + 0.5vw, 28px);
  --text-3xl:   clamp(28px, 1.4rem + 1vw, 36px);
  --text-4xl:   clamp(36px, 1.8rem + 1.5vw, 48px);
  --text-5xl:   clamp(44px, 2rem + 2vw, 64px);
  --text-6xl:   clamp(56px, 2.5rem + 3vw, 88px);

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-body:   1.6;

  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.1em;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Shadows (subtil, primär als Hover-Tell) ---- */
  --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.04);
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.06), 0 2px 4px oklch(0 0 0 / 0.04);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.08), 0 4px 8px oklch(0 0 0 / 0.04);

  /* ---- Motion (Microinteractions strikt rationiert) ---- */
  --duration-instant: 100ms;
  --duration-fast:    180ms;
  --duration-normal:  240ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout ---- */
  --container-max:    min(100% - 48px, 1280px);
  --container-narrow: min(100% - 48px, 880px);
  --reading-width:    clamp(45ch, 65ch, 75ch);

  /* ---- Z-Index ---- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   2000;
}

/* ===== Reduced Motion Override ============================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== View Transitions (Cross-Page) ======================================== */

@view-transition {
  navigation: auto;
}