/* ==========================================================================
   LIFEBYDESIGN — Design tokens
   The single source of truth for colour, type and motion across every page.
   Rule: components reference SEMANTIC tokens (--color-text, --color-surface),
   never raw palette values. Change the brand here, not in a page stylesheet.
   ========================================================================== */

:root {
  /* --- Palette -------------------------------------------------------- */
  --palette-sage: #454938; /* primary brand ground */
  --palette-cacao: #332624;
  --palette-leather: #1c1c1c;
  --palette-bone: #f4f4ef; /* primary brand ink */
  --palette-white: #ffffff;
  --palette-grey: #e6e6e5;
  --palette-cement: #838383;
  --palette-gold: #8a7448;
  --palette-gold-soft: #b0986a;
  --palette-moss: #5a5e4c;
  --palette-sage-tint: #c3c5b7;
  --palette-gold-tint: #c9bc94;

  /* --- Semantic: surfaces & ink ---------------------------------------- */
  --color-surface: var(--palette-sage);
  --color-surface-raised: var(--palette-white);
  --color-text: var(--palette-bone);
  --color-text-muted: var(--palette-sage-tint);
  --color-text-emphasis: var(--palette-bone);
  --color-text-inverse: var(--palette-leather);
  --color-label: var(--palette-gold-tint);
  --color-accent: var(--palette-gold);
  --color-accent-soft: var(--palette-gold-soft);
  --color-border: var(--palette-moss);
  --color-focus: var(--palette-gold-soft);

  /* --- Semantic: controls ---------------------------------------------- */
  --color-button-bg: var(--palette-leather);
  --color-button-ink: #f4f1ec;
  --color-field-bg: var(--palette-white);
  --color-field-ink: var(--palette-leather);
  --color-placeholder: var(--palette-cement);

  /* --- Type ------------------------------------------------------------ */
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Faculty Glyphic', Georgia, 'Times New Roman', serif;
  --font-display: 'Walkway', 'Archivo', system-ui, sans-serif;

  --tracking-tight: 0.04em;
  --tracking-wide: 0.12em;
  --tracking-widest: 0.22em;
  --tracking-label: 0.3em;

  --leading-tight: 1.12;
  --leading-body: 1.6;

  /* --- Space (4px base scale) ------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 52px;
  --space-9: 64px;

  /* --- Radius & elevation ---------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.5s;
  --duration-slow: 0.9s;

  /* --- Layout ----------------------------------------------------------- */
  --measure: 460px; /* comfortable reading width for body copy */
  --measure-display: 900px; /* max width for display headlines */
}