/* ============================================================
   POST — Family Resort · Design Tokens
   colors_and_type.css
   Aligned with official Brand Guidelines V 1.0/2025 (hellweiss).
   ------------------------------------------------------------
   Palette, type and semantic roles. Europa is the primary
   typeface; Black Mango is the headline typeface. Both are
   proprietary and not hosted here — when licensed copies are
   dropped into /fonts/ the @font-face blocks below will pick
   them up. Until then the declared web-safe fallbacks are
   used (flagged substitution; see README).
   ============================================================ */

/* ---------- Font face registration (local files) ------------
   Drop these files into /fonts/ to activate the real faces:
     Europa-Light.woff2, Europa-Regular.woff2, Europa-Bold.woff2
     BlackMango-Regular.woff2  (headline)
   Until then the system-fallback stack is used. */
@font-face {
  font-family: "Europa";
  src: url("./fonts/Europa-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Europa";
  src: url("./fonts/Europa-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Europa";
  src: url("./fonts/Europa-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Black Mango";
  src: url("./fonts/BlackMango-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Flagged substitutions (Google) — remove once licensed
   Europa + Black Mango are in /fonts/. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,700&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  /* ---------- POST palette (official) --------------------
     Primary:
       POST GRÜN  #004330
     Secondaries (earthy):
       Ivory      #EDEBE0     (default page background)
       Beige      #C6BA86
       Sage       #A3AC8A
       Champagne  #F9EAD5
       Forest     #333F2C
       Sunrise    #E17D44
       Olive      #61795E
       Sand       #F0BF84
       Copper     #AD9957
       Terra      #BB6233
  */
  --post-green:   #004330;
  --post-green-90:#0D5040;
  --post-green-80:#26685A;
  --post-green-20:#B3CCC2;
  --post-green-10:#D9E5E0;

  --ivory:        #EDEBE0;
  --ivory-soft:   #F5F2E9;   /* slightly lighter working surface */
  --beige:        #C6BA86;
  --sage:         #A3AC8A;
  --champagne:    #F9EAD5;
  --forest:       #333F2C;
  --sunrise:      #E17D44;
  --sunrise-hover:#C76832;
  --olive:        #61795E;
  --sand:         #F0BF84;
  --copper:       #AD9957;
  --terra:        #BB6233;

  --white:        #FFFFFF;
  --black:        #000000;
  --ink:          #1B1F18;   /* near-black, warm */
  --ink-muted:    #5A5F54;
  --ink-subtle:   #878A7E;

  /* ---------- Semantic roles ----------------------------- */
  --bg:                var(--ivory);
  --bg-elevated:       var(--ivory-soft);
  --bg-inverse:        var(--post-green);
  --bg-accent:         var(--sand);
  --bg-paper-texture:  url('./assets/textures/paper.jpg'); /* optional */

  --fg:                var(--post-green);
  --fg-muted:          var(--ink-muted);
  --fg-subtle:         var(--ink-subtle);
  --fg-on-dark:        var(--ivory);
  --fg-on-accent:      var(--post-green);

  --border:            rgba(0, 67, 48, 0.14);
  --border-strong:     rgba(0, 67, 48, 0.28);
  --border-on-dark:    rgba(237, 235, 224, 0.20);

  --accent:            var(--sunrise);          /* primary CTA accent */
  --accent-hover:      var(--sunrise-hover);
  --accent-deep:       var(--terra);            /* heavier accent */
  --highlight:         var(--sand);             /* soft highlight */

  /* Legacy aliases — keep old component files working */
  --cream:        var(--ivory);
  --paper:        var(--ivory-soft);
  --terracotta:   var(--sunrise);
  --terracotta-hover: var(--sunrise-hover);
  --butter:       var(--sand);
  --meadow:       var(--olive);
  --sky:          var(--sage);
  --sky-deep:     var(--olive);
  --forest-10:    var(--post-green-10);
  --forest-20:    var(--post-green-20);
  --forest-80:    var(--post-green-80);
  --stone:        var(--beige);
  --stone-soft:   #E3DBC2;

  --success:           var(--olive);
  --warning:           var(--copper);
  --danger:            var(--terra);
  --info:              var(--sage);

  /* ---------- Spacing scale (8pt, anchored at 4) --------- */
  --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;
  --space-11: 192px;

  /* ---------- Radii -------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------------------------------- */
  --shadow-subtle: 0 1px 2px rgba(0, 67, 48, 0.06);
  --shadow-card:   0 8px 24px rgba(0, 67, 48, 0.08);
  --shadow-float:  0 24px 48px -12px rgba(0, 67, 48, 0.22);

  /* ---------- Motion ------------------------------------- */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;
  --dur-reveal:  800ms;

  /* ---------- Type families -----------------------------
     Primary: Europa (Light 300 / Regular 400 / Bold 700).
     Fließtext: Regular (Light optional). Hervorhebungen: Bold.
     Headline: Black Mango — upper, lower or ALL-CAPS.
     Accent (handwritten stickers): Caveat. */
  --font-primary: "Europa", "Instrument Sans", "Söhne", "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Black Mango", "Fraunces", "PP Editorial New", Georgia, serif;
  --font-accent:  "Caveat", "Homemade Apple", "Segoe Script", cursive;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Legacy alias — old files asked for --font-body */
  --font-body:    var(--font-primary);

  /* ---------- Type scale (fluid via clamp) -------------- */
  --fs-display:  clamp(44px, 9.5vw, 112px);
  --fs-h1:       clamp(36px, 6.5vw, 72px);
  --fs-h2:       clamp(28px, 4.5vw, 52px);
  --fs-h3:       clamp(22px, 3vw, 32px);
  --fs-body-lg:  clamp(18px, 1.6vw, 20px);
  --fs-body:     clamp(16px, 1.2vw, 17px);
  --fs-small:    14px;
  --fs-eyebrow:  13px;
  --fs-hand:     clamp(28px, 4vw, 48px);

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow: 0.14em;

  /* ---------- Layout ------------------------------------ */
  --container-max: 1440px;
  --container-padding: clamp(20px, 4vw, 64px);
}

/* ============================================================
   Semantic type rules
   ============================================================ */

html { color-scheme: light; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-display,
h1.ds-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1, .ds-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2, .ds-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .ds-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

/* Body copy — Europa Regular by default */
p, .ds-body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.ds-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.ds-body-light { font-weight: 300; }            /* Europa Light */
.ds-body-bold  { font-weight: 700; }            /* Hervorhebungen */

.ds-small { font-size: var(--fs-small); line-height: 1.5; }

.ds-eyebrow {
  font-family: var(--font-primary);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
}

.ds-hand {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: var(--fs-hand);
  line-height: 1;
  color: var(--accent);
  transform: rotate(-3deg);
  display: inline-block;
}

.ds-allcaps { text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* Links */
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

/* Selection */
::selection { background: var(--sand); color: var(--post-green); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}