/* ===========================================================================
   Korkenzieher Design System — design tokens (consolidated).
   Verbatim from the design-system token files: fonts, colors, typography,
   spacing, elevation, and base element defaults. Reference the semantic
   aliases (--surface-*, --text-*, --brand-*) in markup, not the raw scales.

   Font substitutions (flagged in the design system): Cinzel/Oswald/Barlow/
   Yellowtail are Google-Font stand-ins for the original brand faces.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Oswald:wght@300;400;500;600;700&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Yellowtail&display=swap');

:root {
  /* ---- Brand: Navy (primary, from the wordmark ink) ---------------------- */
  --navy-950: #04101F;
  --navy-900: #07182C;
  --navy-800: #0A2240;   /* primary brand navy */
  --navy-700: #102E54;
  --navy-600: #163A69;
  --navy-500: #224C82;
  --navy-400: #3A6499;
  --navy-300: #6A8CB8;
  --navy-200: #A8C0DC;
  --navy-100: #D7E3F0;
  --navy-50:  #EEF3F9;

  /* ---- Brand: Gold / Bronze (secondary, from the crest + subtitle) ------- */
  --gold-900: #4F3D1E;
  --gold-800: #6E5630;
  --gold-700: #8A6E3C;
  --gold-600: #9C7C4C;   /* primary antique gold (subtitle) */
  --gold-500: #B5944F;
  --gold-400: #C9A85F;   /* brighter "flyer gold" highlight */
  --gold-300: #DCC182;
  --gold-200: #ECD9AC;
  --gold-100: #F5EBD3;
  --gold-50:  #FAF4E6;

  /* ---- Accent: Azure Blue (energy / CTA, from the flyer headline) -------- */
  --azure-900: #053E6B;
  --azure-800: #075689;
  --azure-700: #0A6BB8;
  --azure-600: #0E80D4;   /* primary accent */
  --azure-500: #2A95E0;
  --azure-400: #57AEEA;
  --azure-300: #8CC8F2;
  --azure-200: #C0E0F8;
  --azure-100: #E4F2FC;

  /* ---- Neutrals: warm-cool charcoal -> paper ----------------------------- */
  --ink-950: #0A0E13;   /* deepest charcoal field (flyer bg) */
  --ink-900: #0E141B;
  --ink-800: #131B24;
  --ink-700: #1B2530;
  --ink-600: #2A3744;
  --ink-500: #3D4C5A;
  --gray-400: #61707E;
  --gray-300: #8B98A4;
  --gray-200: #BCC6CF;
  --gray-150: #D6DDE3;
  --gray-100: #E8ECF0;
  --gray-75:  #F1F4F7;
  --paper:    #F7F4EE;   /* warm off-white / cream */
  --white:    #FFFFFF;

  /* ---- Semantic status --------------------------------------------------- */
  --success-700: #1F6B3B;
  --success-600: #2A8A4E;   /* checkmark green */
  --success-100: #DDF1E4;
  --warning-700: #9A6712;
  --warning-600: #C8881C;
  --warning-100: #FBEFD2;
  --danger-700:  #9E2A20;
  --danger-600:  #C8392B;   /* "VERSTOPFT" urgency */
  --danger-100:  #FAE0DC;

  /* ---- Semantic aliases -------------------------------------------------- */
  --brand-primary:    var(--navy-800);
  --brand-secondary:  var(--gold-600);
  --brand-accent:     var(--azure-600);

  --surface-page:     var(--paper);
  --surface-card:     var(--white);
  --surface-sunken:   var(--gray-75);
  --surface-raised:   var(--white);
  --surface-inverse:  var(--navy-900);

  --field-base:       var(--ink-950);
  --field-raised:     var(--ink-800);
  --field-line:       rgba(255,255,255,0.08);

  --text-strong:      var(--navy-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--gray-400);
  --text-subtle:      var(--gray-300);
  --text-on-brand:    var(--white);
  --text-on-field:    #E8EEF5;
  --text-on-field-muted: var(--navy-200);
  --text-gold:        var(--gold-600);
  --text-link:        var(--azure-700);

  --border-subtle:    var(--gray-150);
  --border-default:   var(--gray-200);
  --border-strong:    var(--ink-600);
  --border-gold:      var(--gold-400);
  --border-field:     rgba(201,168,95,0.35);

  --focus-ring:       var(--azure-500);

  /* ---- Typography -------------------------------------------------------- */
  --font-serif:   'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-display: 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-script:  'Yellowtail', 'Brush Script MT', cursive;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900;

  --text-2xs: 0.6875rem; --text-xs: 0.9rem; --text-sm: 1rem; --text-base: 1rem;
  --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem;
  --text-3xl: 3rem; --text-4xl: 4rem; --text-5xl: 5.5rem;

  --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25;
  --leading-normal: 1.5; --leading-relaxed: 1.65;

  --tracking-tightest: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0;
  --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.18em;

  --type-wordmark-tracking: 0.06em;

  /* ---- Spacing, radius, sizing ------------------------------------------- */
  --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem;
  --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem; --space-12: 8rem;

  --radius-none: 0; --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 999px; --radius-circle: 50%;

  --border-hairline: 1px; --border-thin: 1.5px; --border-thick: 2px; --border-heavy: 3px;

  --container-sm: 640px; --container-md: 860px; --container-lg: 1120px; --container-xl: 1320px;
  --gutter: var(--space-5);
  --section-y: var(--space-11);

  --control-sm: 36px; --control-md: 44px; --control-lg: 54px;
  --field-pad-x: var(--space-4);

  /* ---- Elevation, shadow, motion ----------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(10,34,64,0.08);
  --shadow-sm: 0 2px 6px rgba(10,34,64,0.10);
  --shadow-md: 0 6px 18px rgba(10,34,64,0.12);
  --shadow-lg: 0 16px 40px rgba(10,34,64,0.16);
  --shadow-xl: 0 28px 70px rgba(7,24,44,0.22);

  --shadow-field: 0 18px 48px rgba(0,0,0,0.55);
  --inset-top-light: inset 0 1px 0 rgba(255,255,255,0.06);
  --inset-gold-line: inset 0 0 0 1px rgba(201,168,95,0.30);

  --glow-azure: 0 0 0 4px rgba(14,128,212,0.28);
  --glow-gold:  0 0 22px rgba(201,168,95,0.35);
  --ring-focus: 0 0 0 3px rgba(42,149,224,0.45);

  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 520ms;
  --press-scale: 0.97;
}

/* ---- Base element defaults --------------------------------------------- */
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
*, *::before, *::after { box-sizing: border-box; }