/* Design Tokens — BNO-Agency */

:root {
  /* Brand colors — niemals direkt referenzieren außerhalb dieser Datei */
  --color-brown: #2b1e16;
  --color-gold: #c2ae7d;
  --color-kashmire: #f4f1ec;

  /* Typografie */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-serif-italic: "Libre Baskerville", "Cormorant Garamond", Georgia, serif;
  --font-grotesk: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-montserrat: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Kopfzeilen: skalieren jetzt bis 375px durch (Desktop-Maß unverändert) */
  --font-display: clamp(1.625rem, 0.437rem + 5.070vw, 5rem);   /* 26 → 80 */
  --font-h2:      clamp(1.5rem,   0.884rem + 2.629vw, 3.25rem); /* 24 → 52 */
  --font-h3:      clamp(1rem,     0.780rem + 0.939vw, 1.625rem);/* 16 → 26 */
  --font-body: 1rem;
  --font-small: 0.875rem;
  --font-eyebrow: 0.8125rem;
  --font-code: 0.8125rem;
  --tracking-eyebrow: 0.18em; /* Bundle: eyebrow-mono 2.52px @ 14px = 0.18em */

  /* ---------------------------------------------------------------
     Fluide Typo-Skala — jeder Wert erreicht bei 1440px exakt das
     bisherige Desktop-Maß und skaliert bis 375px proportional herunter.
     Look bleibt identisch, nur die Skalierung ist fluide.
     --------------------------------------------------------------- */
  --fs-xs:   clamp(0.75rem,   0.728rem + 0.094vw, 0.8125rem); /* 12 → 13 */
  --fs-sm:   clamp(0.8125rem, 0.790rem + 0.094vw, 0.875rem);  /* 13 → 14 */
  --fs-base: clamp(0.875rem,  0.831rem + 0.188vw, 1rem);      /* 14 → 16 */
  --fs-md:   clamp(1rem,      0.934rem + 0.282vw, 1.1875rem); /* 16 → 19 */
  --fs-lg:   clamp(1.0625rem, 0.996rem + 0.282vw, 1.25rem);   /* 17 → 20 */
  --fs-xl:   clamp(1.125rem,  0.993rem + 0.563vw, 1.5rem);    /* 18 → 24 */
  --fs-2xl:  clamp(1.25rem,   1.030rem + 0.939vw, 1.875rem);  /* 20 → 30 */
  --fs-3xl:  clamp(1.5rem,    0.928rem + 2.441vw, 3.125rem);  /* 24 → 50 */
  --fs-4xl:  clamp(1.625rem,  0.840rem + 3.347vw, 3.853rem);  /* 26 → 61.65 */

  /* Spacing — 8px Raster, ab --space-4 fluide (Desktop-Werte unverändert) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4:  clamp(0.75rem,   0.662rem + 0.376vw, 1rem);   /* 12 → 16 */
  --space-5:  clamp(1.0625rem, 0.908rem + 0.657vw, 1.5rem); /* 17 → 24 */
  --space-6:  clamp(1.375rem,  1.155rem + 0.939vw, 2rem);   /* 22 → 32 */
  --space-7:  clamp(1.875rem,  1.479rem + 1.690vw, 3rem);   /* 30 → 48 */
  --space-8:  clamp(2.375rem,  1.803rem + 2.441vw, 4rem);   /* 38 → 64 */
  --space-9:  clamp(2.875rem,  2.127rem + 3.192vw, 5rem);   /* 46 → 80 */
  --space-10: clamp(3.375rem,  2.450rem + 3.944vw, 6rem);   /* 54 → 96 */
  --space-11: clamp(4.25rem,   2.929rem + 5.634vw, 8rem);   /* 68 → 128 */
  --space-12: clamp(5.25rem,   3.577rem + 7.136vw, 10rem);  /* 84 → 160 */

  /* Komponenten-Maße — ersetzen feste px in Buttons, Karten, Medien */
  --btn-w:      min(26.875rem, 100%);                            /* war 430px */
  --btn-w-sm:   min(20.625rem, 100%);                            /* war 330px */
  --btn-min-h:  clamp(3rem,      2.472rem + 2.254vw, 4.5rem);    /* 48 → 72 */
  --btn-pad-y:  clamp(0.625rem,  0.537rem + 0.376vw, 0.875rem);  /* 10 → 14 */
  --btn-pad-x:  clamp(1rem,      0.692rem + 1.315vw, 1.875rem);  /* 16 → 30 */
  --card-pad:   clamp(1.125rem,  0.861rem + 1.127vw, 1.875rem);  /* 18 → 30 */
  --grid-gap:   clamp(1rem,      0.648rem + 1.502vw, 2rem);      /* 16 → 32 */
  --photo-max:  min(28.125rem, 100%);                            /* war 450px */
  --media-portrait: 3 / 4;

  /* Grid-Mindestbreiten für auto-fit/minmax() statt starrer Spalten */
  --col-min-sm: 13rem;
  --col-min-md: 16rem;
  --col-min-lg: 20rem;

  /* Layout — fluid: füllt die Fensterbreite auf jedem Gerät (Mobile bis großer Monitor/TV) */
  --container: min(94vw, 130rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(2.1rem, 4.2vw, 3.7rem);
  --header-height: 6.25rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 9999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --transition-fast: 150ms var(--ease);
  --transition: 200ms var(--ease);
  --transition-slow: 400ms var(--ease);
}

/* ===== Dark theme (default) ===== */
:root,
[data-theme="dark"] {
  --bg: #0d0b08;
  --bg-elevated: #181310;
  --bg-overlay: rgba(13, 11, 8, 0.78);

  --text: var(--color-kashmire);
  --text-muted: rgba(244, 241, 236, 0.7);
  --text-subtle: rgba(244, 241, 236, 0.5);

  --accent: var(--color-gold);
  --accent-soft: rgba(194, 174, 125, 0.16);

  --border: rgba(244, 241, 236, 0.12);
  --border-strong: rgba(244, 241, 236, 0.22);
  --border-dashed: rgba(244, 241, 236, 0.16);

  --shadow-card: none;

  color-scheme: dark;
}

/* ===== Light theme ===== */
[data-theme="light"] {
  --bg: #faf9f6;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(244, 241, 236, 0.82);

  --text: var(--color-brown);
  --text-muted: rgba(43, 30, 22, 0.7);
  --text-subtle: rgba(43, 30, 22, 0.5);

  --accent: var(--color-gold);
  --accent-soft: rgba(194, 174, 125, 0.18);

  --border: rgba(43, 30, 22, 0.14);
  --border-strong: rgba(43, 30, 22, 0.25);
  --border-dashed: rgba(43, 30, 22, 0.18);

  --shadow-card: none;

  color-scheme: light;
}