/* =====================================================================
   DUKA · Gestaltungssystem „Bauplan“
   Einzige Quelle für Farben, Schrift, Abstände, Linien und Bewegung.
   Nie feste Werte im Code verwenden, immer diese Variablen.
   ===================================================================== */

/* Schriften: selbst gehostet (Dateien folgen beim Bauen in /assets/fonts) */
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

@property --draw{syntax:"<number>";inherits:false;initial-value:1}

:root{
  /* ---------- 1 · Grundwerte ---------- */
  --c-paper:#EEEDE6;      /* Planpapier */
  --c-karton:#E3E1D8;     /* Karton */
  --c-plaster:#F7F6F2;    /* frisch verspachtelte Wand (nur im Kopf) */
  --c-line:#C9C6BB;       /* Bleistiftlinie (nur Linien, nie Text) */
  --c-pencil:#625F58;     /* Bleistift */
  --c-graphite:#262522;   /* Graphit */
  --c-signal:#1F3D78;     /* Blaupause (Signalfarbe) */
  --c-signal-2:#2C5296;   /* Blaupause hell (nur Hover) */
  --c-white:#FFFFFF;
  --c-error:#9E1B1B;      /* nur Fehlermeldungen */
  --c-ok:#2F5D3A;         /* nur Bestätigungen */

  /* ---------- 2 · Rollen ---------- */
  --bg:var(--c-paper);
  --bg-raised:var(--c-karton);
  --bg-inverse:var(--c-graphite);
  --text:var(--c-graphite);
  --text-muted:var(--c-pencil);
  --text-inverse:var(--c-paper);
  --accent:var(--c-signal);
  --accent-text:var(--c-white);
  --rule:var(--c-line);
  --wall:var(--c-graphite);
  --scrim:rgb(38 37 34 / .55);

  /* ---------- Schrift ---------- */
  --font:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --fs-display:clamp(3rem,7.6vw,8rem);     /* Kopfzeile, Großbuchstaben */
  --fs-h1:clamp(2.5rem,5.6vw,5.5rem);
  --fs-h2:clamp(2rem,4vw,4rem);
  --fs-h3:clamp(1.375rem,2vw,1.75rem);
  --fs-lead:clamp(1.0625rem,1.3vw,1.25rem);
  --fs-body:1rem;
  --fs-note:.8125rem;                        /* Maße, Bildunterschriften */
  --lh-tight:.92; --lh-head:1.02; --lh-body:1.55;
  --ls-display:-.025em; --ls-head:-.015em;
  --fw-regular:400; --fw-medium:500; --fw-bold:700;

  /* ---------- Raum ---------- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --gutter:clamp(1rem,4vw,3rem);           /* Seitenrand */
  --section:clamp(6rem,13vw,12.5rem);       /* Abstand zwischen Sektionen */
  --maxw:90rem;                             /* 1440 px */
  --cols:12; --col-gap:clamp(.75rem,1.6vw,1.5rem);

  /* ---------- Form ---------- */
  --radius:0;                 /* Planecken: überall eckig */
  --radius-round:50%;         /* nur der Kreis-Motiv */
  --radius-img:8px;           /* Bilder: leicht gerundet */
  --radius-btn:7px;           /* Knöpfe: leicht gerundet, keine Pille */
  --stroke-wall:12px;         /* Wand im Grundriss */
  --stroke-line:1.5px;        /* Rahmen, Knopf-Umriss */
  --stroke-dim:1px;           /* Maßkette */
  --shadow:none;              /* keine Schatten, Tiefe nur über Karton-Ton */
  --tap:44px;                 /* kleinste Tippfläche */

  /* ---------- Bewegung ---------- */
  --ease-out:cubic-bezier(.22,.8,.24,1);    /* Standard: ankommen */
  --ease-in-out:cubic-bezier(.65,.05,.25,1);/* Flächen, Vorhang */
  --ease-snap:cubic-bezier(.34,1.4,.64,1);  /* Marker, kleines Federn */
  --t-short:.25s; --t-base:.45s; --t-long:.9s;
  --scrub:.6;                                /* Nachlauf am Scroll (GSAP) */
  --lenis-lerp:.1;

  /* ---------- 3 · Bauteile ---------- */
  --btn-h:48px;
  --btn-bg:var(--accent); --btn-fg:var(--accent-text);
  --btn-bg-hover:var(--c-signal-2); --btn-gap:3px;
  --nav-h:72px;
  --field-line:var(--c-line);
  --field-line-focus:var(--accent);
  --field-bg:var(--c-paper);
  --field-bg-focus:var(--c-white);
  --marker:var(--accent);
}

@media (prefers-reduced-motion:reduce){
  :root{--t-short:.01ms;--t-base:.01ms;--t-long:.01ms}
}