@import "tailwindcss";

/*
 * Fluid design tokens — every value below scales continuously via clamp()
 * between the Tablet breakpoint (768px) and Desktop (1440px). Below 768px
 * the clamp() floor freezes the value automatically (no separate mobile
 * media query needed for sizing — only for structural layout changes,
 * see the `md:` breakpoint usage in components).
 *
 * Spacing overrides Tailwind's own numeric scale (--spacing-4 etc.) at the
 * exact numbers the styleguide already used (n times 0.25rem equals the
 * desktop value), so every existing p-4, gap-6, px-20 (etc.) utility
 * becomes fluid for free.
 */
@theme {
  /* Fonts */
  --font-sans: var(--font-inter), system-ui, sans-serif;
  --font-display: var(--font-playfair), Georgia, serif;
  --font-serif: var(--font-lora), Georgia, serif;
  --font-script: var(--font-caveat), cursive;

  /* Colors */
  --color-brand: #f6a701;
  --color-brand-hover: #cf8e01; /* verified against the live Figma NavButtonFilled/Hover variant */
  --color-bg-base: #f8f5f1;
  --color-bg-white: #ffffff;
  --color-bg-muted: #f3efe9;
  --color-bg-dark: #1a1a18;
  --color-text-primary: #1a1a18;
  --color-text-body: #2c2c2a;
  --color-text-muted: #6b6b69;
  --color-text-light: #9b9896;
  --color-text-on-dark: #ffffff;
  --color-border: #e5e0d8;
  --color-overlay: rgba(134, 134, 134, 0.55);
  --color-checkout-active: #f6a701;
  --color-checkout-done: #1a1a18;
  --color-toc-active-border: #f6a701;
  --color-success: #2f8f4e;
  --color-success-subtle: #e8f4ea;
  /* Low-stock warning — distinct from --color-brand's golden yellow (used
     for the discount badge) so the two pills never read as the same thing. */
  --color-warning: #c2410c;
  --color-warning-subtle: #fdf1e9;

  /* Radius */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(26, 26, 24, 0.06);
  --shadow-modal: 0 8px 40px rgba(26, 26, 24, 0.16);
  --shadow-sidebar: 0 2px 8px rgba(26, 26, 24, 0.08);

  /* Type scale (fluid 768->1440) */
  --text-display: clamp(2.75rem, 1.3214rem + 2.9762vw, 4rem);
  --text-display--line-height: 1.1;
  --text-h-feature: clamp(1.875rem, 1.1607rem + 1.4881vw, 2.5rem);
  --text-h-feature--line-height: 1.2;
  /* New role, added for page-todo-karten's hero heading (48px Desktop) —
     doesn't match any existing scale step (h-feature=40, h1=36), Figma's
     own measured value takes priority over eyeballing it into a near
     token (Why-point 4). Tablet floor via the styleguide's 80-85% ratio,
     rounded to 40px. "Product/tool page hero H1" role, distinct from
     --text-h1 (already spoken for: "Seiten-H1 (Blog-Detail, Warenkorb,
     etc.)" per styleguide.md §2.2 — a different, smaller role). Also used
     by page-weekly-impulses's hero heading — same 48px role, reused
     rather than minting a near-duplicate token. */
  --text-h-page: clamp(2.5rem, 1.9286rem + 1.1905vw, 3rem);
  --text-h-page--line-height: 1.15;
  --text-h1: clamp(1.75rem, 1.1786rem + 1.1905vw, 2.25rem);
  --text-h1--line-height: 1.15;
  --text-h2: clamp(1.625rem, 1.1964rem + 0.8929vw, 2rem);
  --text-h2--line-height: 1.25;
  --text-h-section: clamp(1.4375rem, 1.0804rem + 0.744vw, 1.75rem);
  --text-h-section--line-height: 1.3;
  --text-h-emphasis: clamp(1.25rem, 0.9643rem + 0.5952vw, 1.5rem);
  --text-h-emphasis--line-height: 1.4;
  --text-h3: clamp(1.1875rem, 0.9732rem + 0.4464vw, 1.375rem);
  --text-h3--line-height: 1.35;
  --text-h-small: clamp(1.125rem, 0.9821rem + 0.2976vw, 1.25rem);
  --text-h-small--line-height: 1.4;
  --text-h4: clamp(1rem, 0.8571rem + 0.2976vw, 1.125rem);
  --text-h4--line-height: 1.4;
  --text-body: 1rem;
  --text-body--line-height: 1.6;
  --text-body-sm: 0.875rem;
  --text-body-sm--line-height: 1.55;
  --text-label: 0.75rem;
  --text-label--line-height: 1.4;

  /* Spacing scale (fluid 768->1440) — overrides Tailwind's default n*0.25rem
     at these exact steps, so p-4/gap-6/px-20/etc. become fluid automatically */
  --spacing-1: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
  --spacing-2: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
  --spacing-3: clamp(0.625rem, 0.4821rem + 0.2976vw, 0.75rem);
  --spacing-4: clamp(0.875rem, 0.7321rem + 0.2976vw, 1rem);
  --spacing-5: clamp(1rem, 0.7143rem + 0.5952vw, 1.25rem);
  --spacing-6: clamp(1.25rem, 0.9643rem + 0.5952vw, 1.5rem);
  --spacing-8: clamp(1.5rem, 0.9286rem + 1.1905vw, 2rem);
  --spacing-10: clamp(1.75rem, 0.8929rem + 1.7857vw, 2.5rem);
  --spacing-12: clamp(2rem, 0.8571rem + 2.381vw, 3rem);
  --spacing-16: clamp(2.5rem, 0.7857rem + 3.5714vw, 4rem);
  --spacing-20: clamp(3rem, 0.7143rem + 4.7619vw, 5rem);
  --spacing-24: clamp(3.5rem, 0.6429rem + 5.9524vw, 6rem);
  --spacing-30: clamp(4rem, 0rem + 8.3333vw, 7.5rem);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

:root {
  /* Layout — not part of Tailwind's numeric spacing scale, referenced via
     arbitrary-value syntax (e.g. px-[var(--layout-padding-x)]) */
  --layout-max-width: 75rem; /* 1200px */
  --layout-padding-x: clamp(2rem, -1.4286rem + 7.1429vw, 5rem);
  --layout-grid-gap: clamp(1rem, 0.4286rem + 1.1905vw, 1.5rem);
  --layout-grid-gap-lg: clamp(1.25rem, 0.3929rem + 1.7857vw, 2rem);

  /* One-off fluid values that aren't part of a broader scale */
  --hero-avatar-size: clamp(2.25rem, 1.6071rem + 1.3393vw, 2.8125rem);
  /* Newsletter copy column — was a hard 38.25rem, which didn't leave enough
     room for the form column at the 768px tablet floor (only 656px of
     content width available for 612px column plus 56px gap), crushing the
     input/button/privacy text to near-zero width and overflowing the page.
     Scales down to 23rem at 768px instead. */
  --newsletter-copy-width: clamp(23rem, 5.5714rem + 36.3095vw, 38.25rem);

  /* Divider section icons (arrow separators, sparkle) — previously hard
     rem values while the "Klarheit/Fokus/Entlastung" text next to them
     used the fluid text-h2 token, so the icons visually stayed still
     while the words scaled. Same fluid(minPx, maxPx) formula as the rest
     of this file, floor ~82.5% of the Desktop value per the styleguide's
     80-85% Mobile-ratio guidance. */
  --divider-arrow-w: clamp(2.125rem, 1.5536rem + 1.1905vw, 2.625rem);
  --divider-arrow-h: clamp(0.625rem, 0.4821rem + 0.2976vw, 0.75rem);
  --divider-sparkle-w: clamp(1.5625rem, 1.1554rem + 0.8482vw, 1.91875rem);
  --divider-sparkle-h: clamp(2.0625rem, 1.5554rem + 1.0565vw, 2.50625rem);
  --divider-sparkle-inner-w: clamp(1.4375rem, 1.09875rem + 0.706vw, 1.734rem);
  --divider-sparkle-inner-h: clamp(1.9375rem, 1.4375rem + 1.0417vw, 2.375rem);
  /* Own token, mirrors --text-h2's clamp() exactly rather than the Word
     component reading var(--text-h2) directly — that's what lets the
     mobile override below shrink just this component's words without
     touching every other text-h2 heading site-wide. */
  --divider-word-size: clamp(1.625rem, 1.1964rem + 0.8929vw, 2rem);
}

/* This project's fluid() scale (see fluid.ts) is calibrated for the
   768-1440px Tablet-Desktop range and floors out at the 768px value for
   any narrower viewport (clamp()'s MIN bound) — by design, see the other
   fluid tokens above. Divider is the one spot that floor doesn't work:
   the "Klarheit → Fokus → Entlastung" phrase plus its connector icons
   needs ~550px of width to lay out on one row even at the 768px floor
   size, far more than a phone's ~310px content width. Below Tailwind's
   sm: breakpoint, shrink these tokens further so the phrase gets much
   closer to fitting on one row instead of stacking into three separate
   centered lines (see Divider.tsx's gap-x-3/gap-3 mobile overrides,
   same breakpoint). Scoped to these component-only tokens, not
   --text-h2 itself. */
@media (max-width: 639px) {
  :root {
    --divider-word-size: 1.125rem;
    --divider-arrow-w: 1.125rem;
    --divider-arrow-h: 0.3125rem;
    --divider-sparkle-w: 0.875rem;
    --divider-sparkle-h: 1.15rem;
    --divider-sparkle-inner-w: 0.8rem;
    --divider-sparkle-inner-h: 1.075rem;
  }
}

html {
  scroll-padding-top: 6.25rem; /* navbar height */
  /* Reserves the scrollbar's width permanently, so any modal's
     overflow:hidden scroll lock (NewsletterModal, VersandModal) never
     removes/re-adds the scrollbar itself — without this, losing the
     scrollbar on open widens the viewport by its width and every fixed/sticky
     element (Navbar included) visibly snaps sideways for one frame. */
  scrollbar-gutter: stable;
}

body {
  background: var(--color-bg-base);
  color: var(--color-text-body);
  font-family: var(--font-sans);
}