/*
  Brand palette (owner's swatches): gold #eccc6e, brown #a66940, plum #814256,
  olive #716f35, cream #f2e9e1, rose #db9a8f, light olive #a49b43,
  accents coral #ff9c89 and yellow #fdf68e. The owner's "olive" in practice is the
  deep, slightly greener shade below; every green must derive from it.
*/
:root, .dark .card {
  --color-bg: #f5f3ec;
  --color-surface: #fff;
  --color-ink: #1f1e12;
  --color-muted: #545248;
  --color-line: #dfdccf;
  --color-primary-text: #434c20;
  --color-accent-text: #97462a;
  --color-tint: #e8ead7;
  --color-danger: #a1271b;
}

:root {
  --color-primary: #515c28;
  --color-primary-hover: #434c20;
  --color-on-primary: #fff;
  --color-accent: #ff9c89;
  --color-accent-hover: #ff8a73;
  --color-on-accent: #262b15;
  --color-accent-soft: #f6e1d8;
  --color-dark: #262b15;
  --color-on-dark: #f2e9e1;
  --color-dark-muted: #c9c4a8;
  --color-tint-on-dark: #e8ead7;
  --color-on-primary-soft: #fcfaf8;
  --color-success: #2d6a3e;
  --color-danger-soft: #fbe9e6;
  --color-live: #4f9a3a;
  --color-live-soft: #dcefd6;
  --color-live-text: #24501a;
  --color-photo-bg: #f3eee4;
  --color-image-bg: #fff;
  --color-note: #fdf68e;
  --color-tape: #eccc6e;

  --font-sans: Elza, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --radius-sm: 0.5rem;
  --radius: 14px;
  --radius-lg: 1.125rem;
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 64px;

  --measure-2xs: 0.25rem;
  --measure-xs: 0.5rem;
  --measure-sm: 0.75rem;
  --measure-md: 1rem;
  --measure-lg: 1.25rem;
  --measure-xl: 1.5rem;
  --measure-2xl: 2rem;
  --measure-3xl: 2.5rem;

  --space-block: 3rem;
  --space-layout: clamp(2.5rem, 6vw, 4.5rem);
  --space-panel: clamp(1.5rem, 4vw, 2.5rem);
  --space-panel-lg: clamp(2rem, 5vw, 3.5rem);
  --space-page-top: 4.5rem;
  --space-section: clamp(4.5rem, 10vw, 7.5rem);
  --space-form-actions: var(--measure-lg);

  --radius-xs: 0.25rem;
  --radius-md: 0.75rem;
  --radius-xl: 1.5rem;
  --radius-round: 999px;

  --text-2xs: 0.75rem;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 3.6vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 4.4vw, 3.5rem);
  --text-5xl: clamp(2.5rem, 5vw, 4rem);
  --text-6xl: clamp(2.75rem, 6.4vw, 5rem);
  --text-7xl: clamp(3.25rem, 7.5vw, 6rem);

  --leading-numeral: 0.8;
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-numeral: -0.05em;
  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-normal: 0;

  --shadow-lift: 0 12px 24px -12px rgb(0 0 0 / 35%);
  --shadow-float: 0 18px 30px -12px rgb(0 0 0 / 45%);
  --shadow-paper: 0 30px 50px -30px rgb(0 0 0 / 40%);
  --shadow-paper-deep: 0 40px 70px -40px rgb(0 0 0 / 45%);
  --shadow-print-lift: 0 40px 60px -32px rgb(0 0 0 / 60%), 0 1px 2px rgb(0 0 0 / 15%);
  --shadow-stack: 0 -20px 40px -30px rgb(0 0 0 / 35%);
  --shadow-paper-primary: 0 30px 50px -30px var(--color-primary);
  --shadow-glow: 0 8px 20px -10px var(--color-primary);
  --shadow-glow-hover: 0 16px 30px -12px var(--color-primary);
  --shadow-glow-accent: 0 14px 28px -14px var(--color-accent-hover);
  --shadow-offset-accent: 10px 10px 0 var(--color-accent);
  --shadow-ring: 0 0 0 4px color-mix(in srgb, var(--color-primary) 22%, transparent);
  --shadow-ring-tint: 0 0 0 3px var(--color-tint);
  --shadow-outline: inset 0 0 0 1.5px var(--color-line);
  --shadow-outline-strong: inset 0 0 0 1.5px var(--color-ink);
  --shadow-underline: inset 0 -2px 0 var(--color-primary);

  --tilt-sm: -0.6deg;
  --tilt-md: 1.2deg;
  --tilt-lg: 2.2deg;
}