/*
 * Design tokens — single source of truth.
 * Inspired by the Kaiser Natron reference site:
 *   pine green + warm yellow on cream, Fraunces serif + DM Sans, pill buttons.
 * Consumed by Tailwind v4 via @theme and by raw CSS via var(--*).
 */

@theme {
  /* ——— Color ——————————————————————————————————————————————— */
  /* Brand — every green-tinted token below is derived from this one
     via color-mix(), so retuning the brand cascades through hovers,
     washes, ink, muted, lines, and shadows. */
  --color-brand: #006548;
  --color-brand-hover: color-mix(in oklch, var(--color-brand), white 15%);
  --color-brand-soft: color-mix(in oklch, var(--color-brand), white 30%);
  /* Slightly raised brand — reserved for floating buttons sitting on a
     brand surface, where bg-brand would blend in. */
  --color-brand-float: color-mix(in oklch, var(--color-brand), white 8%);

  /* Accent (warm yellow) */
  --color-accent: #e9c84b;
  --color-accent-soft: #f2dc7c;
  --color-accent-ink: var(--color-brand);

  /* Neutrals — warm, brand-tinted */
  --color-ink: color-mix(in oklch, var(--color-brand), black 50%);
  --color-ink-placeholder: color-mix(in srgb, var(--color-ink) 35%, transparent);
  --color-muted: color-mix(in oklch, var(--color-brand), white 35%);
  --color-line: color-mix(in srgb, var(--color-brand) 11%, transparent);
  --color-line-strong: color-mix(in srgb, var(--color-brand) 22%, transparent);
  --color-cream: #f4efe4;
  /* Darker cream — brand-tinted so it stays in the warm-green palette
     rather than drifting toward muddy taupe. Used as a visible border
     or rule where plain `--color-cream` would disappear against the
     surface ground, and `--color-line-strong` (brand-tinted hairline)
     would read as "technical line" rather than "paper edge". */
  --color-cream-dark: color-mix(in oklab, var(--color-cream), var(--color-brand) 18%);
  --color-surface: #faf7f1;
  --color-paper: #ffffff;

  /* Washes — tinted fills for hover / subtle backgrounds / overlay chrome */
  --color-brand-wash: color-mix(in srgb, var(--color-brand) 6%, transparent);
  --color-brand-soft-wash: color-mix(in srgb, var(--color-brand-soft) 8%, transparent);
  --color-cream-wash: color-mix(in srgb, var(--color-cream) 8%, transparent);
  --color-cream-wash-strong: color-mix(in srgb, var(--color-cream) 16%, transparent);
  --color-cream-line: color-mix(in srgb, var(--color-cream) 15%, transparent);

  /* Semantic */
  --color-success: var(--color-brand-soft);
  --color-success-wash: color-mix(in srgb, var(--color-brand-soft) 12%, transparent);
  --color-warning: #c6900f;
  --color-warning-wash: rgba(198, 144, 15, 0.15);
  --color-danger: #b23a2a;
  --color-danger-wash: rgba(178, 58, 42, 0.12);

  /* ——— Typography ———————————————————————————————————————————— */
  --font-serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Section-headline scale — fluid clamps shared by full-bleed
     sections (Hero, About, Revitalization, Bundles). Centralised so
     the home page reads as one typographic rhythm rather than a set
     of individually-tuned clamps. `display` is the first-fold hero
     statement; `headline-lg` is the standard second-tier section
     heading; `headline-md` is a quieter band (Bundles). Tailwind v4
     auto-generates `text-display` / `text-headline-lg` / `text-
     headline-md` utilities from these custom properties. */
  --text-display: clamp(3.25rem, 5.2vw, 5.125rem);
  --text-headline-lg: clamp(2.25rem, 5vw, 3.75rem);
  --text-headline-md: clamp(2rem, 4vw, 3rem);

  --tracking-eyebrow: 0.08em;
  --tracking-label: 0.04em;
  --tracking-wide: 0.12em;
  --tracking-tight: -0.025em;

  /* ——— Iconography sizing —————————————————————————————————— */
  /* Orbit is the decorative dot-on-a-ring glyph used in
     Revitalization's feature cluster. Kept as a token so any
     future "pillar / feature / science-beat" block can match
     without re-deriving the geometry. */
  --size-orbit: 72px;

  /* ——— Radius ———————————————————————————————————————————————— */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 100px;

  /* ——— Shadow (brand-tinted) ———————————————————————————————— */
  --shadow-sm: 0 4px 24px color-mix(in srgb, var(--color-brand) 9%, transparent);
  --shadow-md: 0 12px 28px color-mix(in srgb, var(--color-brand) 15%, transparent);
  --shadow-lg: 0 16px 44px color-mix(in srgb, var(--color-brand) 18%, transparent);

  /* ——— Motion ——————————————————————————————————————————————— */
  /* Three UI durations + one scenic duration for looping atmosphere
     (orbit, slow pulses). Easings: --ease-out is the house default for
     arrivals; --ease-in-out only when the element has to come and go. */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-scene: 480ms;
  --duration-orbit: 16s;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;

  /* Named animations. Tailwind v4 exposes these as `animate-*`
     utilities; raw CSS can call them via `animation: var(--animate-*)`.
     Keyframes live in `motion.css` (outside @theme). */
  --animate-orbit: spin var(--duration-orbit) linear infinite;
  --animate-fade-in-up: fade-in-up var(--duration-slow) var(--ease-out) both;
  --animate-pulse-soft: pulse-soft 2.8s var(--ease-in-out) infinite;
}
