/* GENERATED FILE — do not edit.
 * Source: design/tokens/tokens.json
 * Regenerate: yarn tokens
 * Generated: 2026-09-16 (tokens v3.0.0)
 */

/* ONE THEME. color-scheme is declared rather than assumed, so a device in dark
   mode does not have the browser re-colour form controls, scrollbars and autofill
   to match a theme this design does not have. */

:root {
  color-scheme: light;
  --brand-primary-800: #7B4038;
  --brand-primary-700: #94574C;
  --brand-primary-600: #B4766A;
  --brand-primary-500: #C89184;
  --brand-primary-200: #F0D3CA;
  --brand-primary-100: #FAEBE5;
  --brand-secondary-700: #3A2E2A;
  --brand-secondary-100: #EFE7E0;
  --brand-accent-600: #7A6029;
  --brand-accent-500: #A08757;
  --brand-accent-200: #F7EEDD;
  --brand-accent-on-brand: #D8B98A;
  --brand-info-700: #7B4038;
  --brand-info-100: #F7E9E4;
  --brand-success-700: #2F6B4F;
  --brand-success-600: #3E8463;
  --brand-success-100: #E4F0E8;
  --bg-band-blush: #FBEFEA;
  --bg-band-rose: #FAECE8;
  --bg-band-sand: #FBF3E7;
  --bg-band-sage: #EFF3EC;
  --bg-hero-blush: #F6C8BC;
  --bg-hero-rose: #F4B9B9;
  --bg-hero-sand: #EFD9AE;
  --bg-hero-sage: #D3DCAE;
  --bg-canvas: #FCF8F3;
  --bg-surface: #FFFDFA;
  --bg-raised: #FFFFFF;
  --bg-sunken: #F9F1EB;
  --bg-overlay: rgba(58,46,42,0.55);
  --bg-brand-panel: #3A2E2A;
  --bg-on-brand-panel: rgba(251,243,236,0.08);
  --text-primary: #3A2E2A;
  --text-secondary: #5F534C;
  --text-muted: #786A60;
  --text-inverse: #FFFDFA;
  --text-on-brand: #FBF3EC;
  --text-on-brand-muted: #D9C8BD;
  --border-subtle: rgba(58,46,42,0.12);
  --border-on-brand: rgba(251,243,236,0.24);
  --border-strong: #9A8377;
  --border-focus: #94574C;
  --status-danger-700: #8E3A30;
  --status-danger-600: #B04A3C;
  --status-danger-100: #F8E4E0;
  --status-warning-700: #8A5A14;
  --status-warning-600: #A8730F;
  --status-warning-100: #F7ECD8;
  --shadow-1: 0 1px 1px rgba(58,46,42,0.04), 0 1px 3px rgba(58,46,42,0.06);
  --shadow-2: 0 1px 2px rgba(58,46,42,0.05), 0 4px 12px -2px rgba(58,46,42,0.08);
  --shadow-3: 0 2px 4px rgba(58,46,42,0.06), 0 14px 32px -8px rgba(58,46,42,0.14);
  --shadow-4: 0 4px 8px rgba(58,46,42,0.07), 0 30px 64px -14px rgba(58,46,42,0.22);
  --shadow-brand: 0 1px 2px rgba(74,32,25,0.28), 0 10px 26px -10px rgba(148,87,76,0.55);
  --shadow-inset-well: inset 0 1px 2px rgba(58,46,42,0.09);
  --gradient-brand: linear-gradient(180deg, var(--brand-primary-700) 0%, var(--brand-primary-800) 100%);
  --gradient-brand-hover: linear-gradient(180deg, var(--brand-primary-700) 0%, var(--brand-primary-700) 58%, var(--brand-primary-800) 100%);
  --gradient-brand-soft: linear-gradient(160deg, var(--brand-primary-100) 0%, var(--bg-surface) 100%);
  --gradient-surface: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface) 34%, color-mix(in srgb, var(--brand-primary-100) 58%, var(--bg-surface)) 100%);
  --gradient-raised: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-raised) 38%, color-mix(in srgb, var(--brand-primary-100) 44%, var(--bg-raised)) 100%);
  --gradient-canvas: radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--bg-band-blush) 82%, transparent) 0%, transparent 62%), radial-gradient(760px 420px at 96% 2%, color-mix(in srgb, var(--brand-primary-100) 70%, transparent) 0%, transparent 58%), radial-gradient(700px 400px at 2% 8%, color-mix(in srgb, var(--bg-band-sand) 74%, transparent) 0%, transparent 56%);
  --gradient-hero: radial-gradient(ellipse 130% 95% at 50% 38%, #FBDDD5 0%, var(--bg-hero-blush) 100%);
  --gradient-gold-rule: linear-gradient(90deg, transparent 0%, var(--brand-accent-500) 50%, transparent 100%);
  --gradient-gold-foil: linear-gradient(135deg, var(--brand-accent-200) 0%, var(--brand-accent-500) 42%, var(--brand-accent-600) 56%, var(--brand-accent-200) 100%);
  --gradient-petal: linear-gradient(135deg, var(--brand-primary-100) 0%, var(--brand-primary-500) 100%);
  --gradient-ink: radial-gradient(110% 90% at 18% 2%, color-mix(in srgb, var(--bg-brand-panel) 94%, transparent) 0%, transparent 66%), linear-gradient(155deg, var(--bg-brand-panel) 0%, #2A211E 100%);
  --gradient-hero-rose: radial-gradient(ellipse 130% 95% at 50% 38%, #FAD6D6 0%, var(--bg-hero-rose) 100%);
  --gradient-hero-sand: radial-gradient(ellipse 130% 95% at 50% 38%, #F8EBCF 0%, var(--bg-hero-sand) 100%);
  --gradient-hero-sage: radial-gradient(ellipse 130% 95% at 50% 38%, #E6ECCC 0%, var(--bg-hero-sage) 100%);
  --glass-bg: rgba(255,253,250,0.82);
  --glass-border: rgba(58,46,42,0.10);
  --glass-blur: 14px;
  --sheen-top: rgba(255,255,255,0.90);
  --sheen-bottom: rgba(58,46,42,0.09);
  --sheen-brand: rgba(255,255,255,0.26);
  --sheen-brand-shade: rgba(58,20,14,0.42);
  --sheen-ring: rgba(58,46,42,0.06);

  --font-display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Pinyon Script', 'Brush Script MT', cursive;
  --font-devanagari: 'Noto Sans Devanagari', Mukta, 'Nirmala UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, monospace;
  --font-serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --text-2xs: 0.75rem;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.9375rem;
  --text-3xl: 2.4375rem;
  --text-4xl: 3.0625rem;
  --text-5xl: 3.8125rem;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --vary-display: 'wght' 400;
  --vary-display-medium: 'wght' 500;
  --vary-body: 'wght' 300;
  --vary-body-regular: 'wght' 400;
  --vary-body-medium: 'wght' 500;
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.2em;
  --tracking-widest: 0.32em;
  --measure-prose: 68ch;
  --measure-narrow: 46ch;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-2xl: 34px;
  --radius-petal: 68% 8% 68% 8%;
  --radius-full: 9999px;
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;
  --duration-reveal: 1000ms;
  --duration-bloom: 1800ms;
  --ease-standard: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-exit: cubic-bezier(.4,0,1,1);
  --bp-xs: 360px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
  --layout-content-max: 1240px;
  --layout-wizard-max: 720px;
  --layout-dashboard-max: 1180px;
  --layout-sidebar: 300px;
  --layout-tap-target: 44px;
  --layout-header-h: 92px;
  --layout-gutter: clamp(20px, 4vw, 48px);
  --layout-section: clamp(72px, 9vw, 128px);
}

/* Base element styling that every surface inherits */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* The wash is a background LAYER over the flat canvas colour, not a
     replacement for it: if gradients fail to paint, the page is still
     --bg-canvas and every contrast pair the gate validated still holds. */
  background-color: var(--bg-canvas);
  background-image: var(--gradient-canvas);
  background-repeat: no-repeat;
  /* Deliberately NOT background-attachment: fixed. Pinning the wash to the
     viewport repaints all three radial gradients on every scroll frame, which on
     a long page (the Kitchen is 24,000px) is a visible cost — it made the
     full-page screenshot time out, which is the same work a scrolling device
     would be doing. Anchored to the document, the wash sits at the top where the
     light is meant to come from and scrolls away like everything else. */
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-optical-sizing: auto;
  font-variation-settings: var(--vary-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cormorant Garamond is a high-contrast old-style face drawn to be set LARGE.
   Every heading therefore takes it at weight 400 with tight leading, and nothing
   below --text-lg uses it at all: small text in this family turns to hairlines on
   a phone. Set once here so no heading anywhere has to remember. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-variation-settings: var(--vary-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--brand-secondary-700);
  margin: 0;
}

a { color: var(--brand-info-700); }

/* One focus style, everywhere. Never remove it — replace it if you must. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Numeric data must align in tables */
.tabular { font-variant-numeric: tabular-nums; }

/* Minimum tap target */
.tap { min-width: var(--layout-tap-target); min-height: var(--layout-tap-target); }

/* The ambient wash is screen material. On paper it would either be dropped by
   the print dialog's "background graphics" default or, worse, honoured — and the
   bio-data PDF families circulate must be plain white behind the text. */
@media print {
  body { background-image: none; background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}