/* =========================================================================
   EINFACH MEER MEDIA — Design Tokens
   All CSS custom properties. Import once, reference everywhere.
   ========================================================================= */

/* ---- Fonts ---- */
@font-face { font-family: 'LT Afficher Neue'; src: url('../fonts/LTAfficherNeue-Subhead.ttf') format('truetype');       font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'LT Afficher Neue'; src: url('../fonts/LTAfficherNeue-MediumSubhead.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'LT Afficher Neue'; src: url('../fonts/LTAfficherNeue-SemBdSubhead.ttf') format('truetype');  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'LT Afficher Neue'; src: url('../fonts/LTAfficherNeue-BoldSubhead.ttf') format('truetype');   font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'League Spartan'; src: url('../fonts/LeagueSpartan-Thin.ttf') format('truetype');       font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'League Spartan'; src: url('../fonts/LeagueSpartan-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'League Spartan'; src: url('../fonts/LeagueSpartan-Light.ttf') format('truetype');      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'League Spartan'; src: url('../fonts/LeagueSpartan-Regular.ttf') format('truetype');    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'League Spartan'; src: url('../fonts/LeagueSpartan-Medium.ttf') format('truetype');     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'League Spartan'; src: url('../fonts/LeagueSpartan-SemiBold.ttf') format('truetype');   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'League Spartan'; src: url('../fonts/LeagueSpartan-Bold.ttf') format('truetype');       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'League Spartan'; src: url('../fonts/LeagueSpartan-ExtraBold.ttf') format('truetype');  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'League Spartan'; src: url('../fonts/LeagueSpartan-Black.ttf') format('truetype');      font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---- Brand colors ----
     Navy replaces the former bright petrol as the dominant dark tone; the light
     sections sit on warm cream instead of cool ivory.

     Exactly two dark surfaces carry the whole site: --brand-navy for the
     alternating sections, --brand-navy-deep for the bookends (hero base,
     contact, footer). --brand-navy-ink is for overlays and shadows only —
     never as a section background, or the blues start looking arbitrary. */
  --brand-navy:        #12314A;
  --brand-navy-deep:   #0C2334;
  --brand-navy-ink:    #071A27;

  /* Legacy petrol names now resolve to the same two navies. */
  --brand-petrol:      #12314A;
  --brand-petrol-deep: #0C2334;
  --brand-petrol-ink:  #071A27;
  --brand-petrol-tint: #E4EAEE;
  --brand-petrol-mist: #F1F4F6;

  --brand-gold:        #C09C54;
  --brand-gold-warm:   #A9803A;
  --brand-gold-pale:   #E7D6A8;
  --brand-gold-cream:  #F3E9D4;

  /* ---- Neutrals ---- */
  --cream:        #F5EEE1;
  --cream-soft:   #FAF5EB;
  --cream-deep:   #ECE1CE;
  --ivory:        #F5EEE1;
  --paper:        #FFFDF9;
  --bone:         #E8DCC7;
  --sand:         #D6C7AB;
  --stone-50:     #F5F1E9;
  --stone-100:    #E7E1D5;
  --stone-300:    #B5AD9C;
  --stone-500:    #6C6659;
  --stone-700:    #3A362F;
  --stone-900:    #191712;

  /* ---- Semantic fg/bg ---- */
  --fg-1:        #10222F;
  --fg-2:        #454F58;
  --fg-3:        #767D84;
  --fg-inverse:  #F5EEE1;
  --fg-accent:   #A9803A;
  --fg-on-dark:  #F1EADC;
  --fg-on-petrol:#F1EADC;

  --bg-page:    #F5EEE1;
  --bg-surface: #FFFDF9;
  --bg-soft:    #FAF5EB;
  --bg-tint:    #ECE1CE;
  --bg-dark:    #12314A;
  --bg-darker:  #0C2334;

  --border-hairline: rgba(16, 34, 47, 0.12);
  --border-soft:     rgba(16, 34, 47, 0.20);
  --border-strong:   rgba(16, 34, 47, 0.38);
  --border-gold:     rgba(192, 156, 84, 0.45);

  /* ---- Hairlines on dark sections ---- */
  --border-on-dark:      rgba(241, 234, 220, 0.14);
  --border-on-dark-gold: rgba(192, 156, 84, 0.28);

  /* ---- Type ---- */
  --font-display:   'LT Afficher Neue', 'Georgia', serif;
  --font-editorial: 'LT Afficher Neue', 'Georgia', serif;
  --font-body:      'League Spartan', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:      ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---- Type scale ---- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.22em;

  /* ---- Spacing (4px base) ---- */
  --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;
  --sp-11: 192px;

  /* ---- Radii ---- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(12, 35, 52, 0.06);
  --shadow-sm: 0 2px 8px rgba(12, 35, 52, 0.08);
  --shadow-md: 0 10px 28px -8px rgba(12, 35, 52, 0.18);
  --shadow-lg: 0 24px 48px -16px rgba(12, 35, 52, 0.28);
  --shadow-xl: 0 40px 80px -24px rgba(12, 35, 52, 0.35);

  /* ---- Layout ---- */
  --max-w-content: 1240px;
  --max-w-prose:   680px;
  --gutter:        clamp(20px, 4vw, 48px);

  /* ---- Motion ---- */
  --ease-water: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-tide:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   260ms;
  --dur-slow:   520ms;
  --dur-reveal: 900ms;
}