@import "tailwindcss";

/*
 * Fluid design tokens — every value below scales continuously via clamp()
 * between the structural breakpoint (640px) and Desktop (1440px). Below
 * 640px the clamp() floor freezes the value automatically (no separate
 * mobile media query needed for sizing — only for structural layout
 * changes, see the `sm:` 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 640->1440) */
  --text-display: clamp(2.75rem, 1.75rem + 2.5vw, 4rem);
  --text-display--line-height: 1.1;
  --text-h-feature: clamp(1.875rem, 1.375rem + 1.25vw, 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, 2.1rem + 1vw, 3rem);
  --text-h-page--line-height: 1.15;
  --text-h1: clamp(1.75rem, 1.35rem + 1vw, 2.25rem);
  --text-h1--line-height: 1.15;
  --text-h2: clamp(1.625rem, 1.325rem + 0.75vw, 2rem);
  --text-h2--line-height: 1.25;
  --text-h-section: clamp(1.4375rem, 1.1875rem + 0.625vw, 1.75rem);
  --text-h-section--line-height: 1.3;
  --text-h-emphasis: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
  --text-h-emphasis--line-height: 1.4;
  --text-h3: clamp(1.1875rem, 1.0375rem + 0.375vw, 1.375rem);
  --text-h3--line-height: 1.35;
  --text-h-small: clamp(1.125rem, 1.025rem + 0.25vw, 1.25rem);
  --text-h-small--line-height: 1.4;
  --text-h4: clamp(1rem, 0.9rem + 0.25vw, 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 640->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.525rem + 0.25vw, 0.75rem);
  --spacing-4: clamp(0.875rem, 0.775rem + 0.25vw, 1rem);
  --spacing-5: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
  --spacing-6: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
  --spacing-8: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  --spacing-10: clamp(1.75rem, 1.15rem + 1.5vw, 2.5rem);
  --spacing-12: clamp(2rem, 1.2rem + 2vw, 3rem);
  --spacing-16: clamp(2.5rem, 1.3rem + 3vw, 4rem);
  --spacing-20: clamp(3rem, 1.4rem + 4vw, 5rem);
  --spacing-24: clamp(3.5rem, 1.5rem + 5vw, 6rem);
  --spacing-30: clamp(4rem, 1.2rem + 7vw, 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, -0.4rem + 6vw, 5rem);
  --layout-grid-gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  --layout-grid-gap-lg: clamp(1.25rem, 0.65rem + 1.5vw, 2rem);

  /* One-off fluid values that aren't part of a broader scale */
  --hero-avatar-size: clamp(2.25rem, 1.8rem + 1.125vw, 2.8125rem);
  /* Newsletter copy column — was a hard 38.25rem, which didn't leave enough
     room for the form column at the 640px structural floor (only ~576px of
     content width available for a 612px column plus gap at that width),
     crushing the input/button/privacy text to near-zero width and
     overflowing the page. Scales down to 23rem at 640px instead. Note: the
     inner input+button row still switches to a row layout at `lg:` (1024px),
     not at the site's `sm:` (640px) structural line — even at this reduced
     floor there isn't enough room for input+button side by side below
     ~900px, see Newsletter.tsx's own comment. */
  --newsletter-copy-width: clamp(23rem, 10.8rem + 30.5vw, 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.725rem + 1vw, 2.625rem);
  --divider-arrow-h: clamp(0.625rem, 0.525rem + 0.25vw, 0.75rem);
  --divider-sparkle-w: clamp(1.5625rem, 1.2775rem + 0.7125vw, 1.9188rem);
  --divider-sparkle-h: clamp(2.0625rem, 1.7075rem + 0.8875vw, 2.5063rem);
  --divider-sparkle-inner-w: clamp(1.4375rem, 1.2003rem + 0.593vw, 1.734rem);
  --divider-sparkle-inner-h: clamp(1.9375rem, 1.5875rem + 0.875vw, 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.325rem + 0.75vw, 2rem);
}

/* This project's fluid() scale (see fluid.ts) is calibrated for the
   640-1440px structural-to-Desktop range and floors out at the 640px 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 640px
   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);
}