/* vibara — Design-Tokens · Variante A "Apotheker-Minimal"
 * Hell ist Standard; Dunkel überschreibt via prefers-color-scheme.
 */

:root {
  /* Farben (hell) */
  --bg:        #F2ECDF;
  --bg-2:      #E9E1D0;
  --surface:   #F8F4EA;
  --ink:       #1A1612;
  --ink-70:    rgba(26, 22, 18, 0.62);
  --ink-40:    rgba(26, 22, 18, 0.36);
  --ink-15:    rgba(26, 22, 18, 0.14);
  --ink-08:    rgba(26, 22, 18, 0.08);
  --accent:    #B8632F;

  /* Typografie-Stacks */
  --font-serif:   'EB Garamond', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Cormorant Garamond', 'EB Garamond', serif;

  /* Type-Skala (mobile-first via clamp) */
  --type-display:  clamp(40px, 8vw, 84px);
  --type-h2:       clamp(32px, 5vw, 58px);
  --type-h3:       clamp(22px, 3vw, 36px);
  --type-body-lg:  clamp(16px, 2vw, 19px);
  --type-body:     15px;
  --type-small:    13px;
  --type-mono:     10px;

  /* Abstands-Skala (4-px-Raster) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Container */
  --container-max: 1440px;
  --container-pad-mobile:  20px;
  --container-pad-tablet:  40px;
  --container-pad-desktop: 72px;

  /* Breakpoints (als CSS-Custom-Properties dokumentiert, in @media als Literale verwendet) */
  --bp-tablet:  768px;
  --bp-desktop: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #1A1612;
    --bg-2:      #221C16;
    --surface:   #241D17;
    --ink:       #F2ECDF;
    --ink-70:    rgba(242, 236, 223, 0.66);
    --ink-40:    rgba(242, 236, 223, 0.36);
    --ink-15:    rgba(242, 236, 223, 0.16);
    --ink-08:    rgba(242, 236, 223, 0.08);
    --accent:    #D89B6D;
  }
}