/* QUBE 2.0 Seminyak, Design Tokens v2 (05.10.2026)
   Konzept "Ein Tag in Kerobokan": jede Sektion traegt eine Tageszeit, der Seitengrund folgt ihr.
   Schrift v2: Bodoni Moda (Display, Didone wie die Award-Referenzen) + Archivo (Text, Labels breit).
   Regeln: Laufweite immer 0. Keine Gedankenstriche. Kontrast WCAG AA fuer jeden Text. */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
/* Alternativen fuer den Schrift-Vergleich (?font=b oder ?font=c), werden nur bei Bedarf geladen */
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-normal.woff2") format("woff2"); font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* Tageszeiten */
  --t-dawn:   #F4EFE7;
  --t-day:    #F7F4EF;
  --t-golden: #EFE3D2;
  --t-dusk:   #23262D;
  --t-night:  #15171B;

  /* Flaechen und Linien */
  --kalk:  #ECE5DA;
  --stone: #A8A29C;
  --line:  #D9D0C3;
  --line-dark: #3A3E46;

  /* Schrift */
  --ink:   #1D1B17;   /* 15.0:1 auf Morgen */
  --ink-2: #4A453D;   /*  8.3:1 */
  --ink-3: #6B6458;   /*  5.1:1 */
  --on-dark:   #F1EBE1;
  --on-dark-2: #B4AC9F;

  /* Akzente */
  --camel: #BD986D;   /* Longitude-Markenfarbe, auf hell nur Deko */
  --teak:  #7E6040;
  --rice:  #5E6B4C;
  --clay:  #C07B5C;

  /* Typografie */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 400;
  --label-stretch: 112%;   /* breite Labels statt Sperrung */

  --fs-hero:  clamp(2.35rem, 1.2rem + 4.6vw, 6.4rem);
  --fs-d1:    clamp(2.1rem, 1.25rem + 3.3vw, 4.75rem);
  --fs-d2:    clamp(1.75rem, 1.2rem + 2vw, 3.4rem);
  --fs-d3:    clamp(1.35rem, 1.15rem + .7vw, 1.9rem);
  --fs-num:   clamp(2.4rem, 1.6rem + 3vw, 4.6rem);
  --fs-lead:  clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --fs-body:  clamp(1.0625rem, 1.03rem + .15vw, 1.125rem);
  --fs-small: .9375rem;
  --fs-micro: .8125rem;

  --lh-tight: 1.02;
  --lh-head: 1.08;
  --lh-body: 1.55;

  /* Abstand */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(80px, 6vw + 48px, 168px);
  --gutter: clamp(20px, 4.4vw, 72px);
  --col-gap: clamp(16px, 2vw, 32px);
  --measure: 34em;

  /* Form */
  --r-0: 0; --r-1: 2px; --r-pill: 999px;
  --glass: rgba(244, 239, 231, .74);
  --glass-dark: rgba(21, 23, 27, .66);
  --blur: saturate(1.4) blur(18px);

  /* Bewegung */
  --ease-out: cubic-bezier(.2, .7, .1, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-fast: 180ms; --d-base: 420ms; --d-slow: 900ms; --d-day: 1200ms;
  --tap: 56px;
}

/* Schrift-Alternativen zum Vergleich */
:root[data-font="b"] { --font-display: "Instrument Serif", Georgia, serif; --font-text: "Inter Tight", Arial, sans-serif; --label-stretch: 100%; }
:root[data-font="c"] { --font-display: "Newsreader", Georgia, serif; --font-text: "Hanken Grotesk", Arial, sans-serif; --display-weight: 300; --label-stretch: 100%; }

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --d-day: 0ms; }
}