/* ==========================================================================
   Design Tokens — Chef James Won
   The single source of truth for typography, colour, spacing, and motion.
   All component styles reference these tokens — never hard-coded values.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Colour — Five-colour restrained palette
     ------------------------------------------------------------------------ */
  /* Refined palette (May 2026) — deepened ink + warmer parchment, ochre→champagne
     and oxblood→burgundy under their existing variable names. The conceptual
     names have evolved (champagne replaces ochre, burgundy replaces oxblood)
     but the variable names are kept for site-wide stability. */
  --colour-ink: #14140F;          /* Deep warm-black — body text, primary surface */
  --colour-parchment: #F7F1E6;    /* Warm off-white — page background */
  --colour-ochre: #C8A961;        /* Champagne accent — dividers, link hover, drop caps */
  --colour-ochre-text: #7E5E1A;   /* AA-contrast champagne for small-caps text labels on parchment (5.3:1) */
  --colour-oxblood: #4A1416;      /* Burgundy secondary accent — sparingly used */
  --colour-mute: #8B8579;         /* Neutral — captions, metadata, borders */
  /* Conceptual aliases — for code that wants the new names */
  --colour-champagne: var(--colour-ochre);
  --colour-burgundy: var(--colour-oxblood);

  /* Derived — semantic aliases */
  --colour-text: var(--colour-ink);
  --colour-text-muted: #6F685A;   /* AA-compliant muted text — 4.6:1 on parchment (was var(--colour-mute) #8B8579, 3.26:1). Borders keep --colour-mute. */
  --colour-background: var(--colour-parchment);
  --colour-accent: var(--colour-ochre);
  --colour-accent-deep: var(--colour-oxblood);
  --colour-border: rgba(139, 133, 121, 0.3);
  --colour-border-strong: var(--colour-mute);
  --colour-link: var(--colour-ink);
  --colour-link-hover: var(--colour-ochre);

  /* Aliases — defined to prevent silent fallback in components.css. The home,
     contact, and video cards referenced these names while they were undefined,
     falling back to off-palette literals (#faf5ed, #f3eddf, #6b6360, …); all now
     resolve to the canonical five-colour palette so every surface and label
     reads on-palette. */
  --colour-paper: var(--colour-parchment);
  --colour-paper-deep: var(--colour-parchment);
  --colour-parchment-deeper: var(--colour-parchment);
  --colour-cream: var(--colour-parchment);
  --colour-cream-warm: var(--colour-parchment);
  --colour-ink-muted: var(--colour-text-muted);
  --colour-rule: var(--colour-border);
  --container-large: var(--width-content);
  --font-utility: var(--font-body);

  /* ------------------------------------------------------------------------
     Typography — Editorial register matched to the WordPress flagship.
     Display: GT Sectra (commercial) → EB Garamond (Google) → Tiempos Headline → Georgia.
     Body:    Söhne (commercial)     → Inter (Google)        → Aktiv Grotesk → system-ui.
     ------------------------------------------------------------------------ */
  --font-display: "Cormorant Garamond", "GT Sectra", "EB Garamond", "Tiempos Headline", Georgia, serif;
  --font-body: "Söhne", "Inter", "Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Aliases — defined to prevent silent fallback in components.css.
     --font-serif and --font-sans are referenced by 15+ component rules
     (contact-card label, video-card title, caption, metadata, etc.).
     Both currently aliased to --font-body so rendering matches the
     established WordPress flagship register (sans body throughout).
     A future refinement may switch --font-serif to --font-display for
     the named components — held for chef direction. */
  --font-serif: var(--font-body);
  --font-sans: var(--font-body);

  /* Type scale — modular, generous */
  --type-xs: 0.75rem;       /* 12px — micro labels, eyebrow */
  --type-sm: 0.875rem;      /* 14px — captions, metadata */
  --type-base: 1rem;        /* 16px — body baseline */
  --type-md: 1.125rem;      /* 18px — italic reflections, lead prose */
  --type-lg: 1.25rem;       /* 20px — large body, sub-heading */
  --type-xl: 1.5rem;        /* 24px — H4 */
  --type-2xl: 1.875rem;     /* 30px — H3 */
  --type-3xl: 2.5rem;       /* 40px — H2 */
  --type-4xl: 3.5rem;       /* 56px — H1 */
  --type-5xl: 5rem;         /* 80px — hero display */
  --type-6xl: 6.5rem;       /* 104px — oversized hero */

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-prose: 1.7;     /* Long-form reading */

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;     /* Eyebrow labels */
  --tracking-widest: 0.16em;    /* Caps display */

  /* Weights — calibrated to the WordPress flagship register.
     "Light" is intentionally 500 here, not 300, because the WordPress flagship
     uses GT Sectra at weight 500 for its display register and EB Garamond
     reads thin below 500 in serif terms. Treat --weight-light as the
     editorial display baseline; use --weight-body-light (300) for genuinely
     light text such as decorative Chinese characters. */
  --weight-light: 500;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Semantic display weights — preferred over raw scale references */
  --weight-display: 500;     /* Hero, h1, section titles — editorial weight */
  --weight-headline: 500;    /* Card titles, sub-headings */
  --weight-body: 400;        /* Default body text */
  --weight-body-light: 300;  /* Secondary body, captions */

  /* ------------------------------------------------------------------------
     Spacing — 8px base scale
     ------------------------------------------------------------------------ */
  --space-1: 0.5rem;      /*  8px */
  --space-2: 0.75rem;     /* 12px */
  --space-3: 1rem;        /* 16px */
  --space-4: 1.5rem;      /* 24px */
  --space-5: 2rem;        /* 32px */
  --space-6: 3rem;        /* 48px */
  --space-7: 4rem;        /* 64px */
  --space-8: 6rem;        /* 96px */
  --space-9: 8rem;        /* 128px */
  --space-10: 10rem;      /* 160px — section dividers on large screens */

  /* ------------------------------------------------------------------------
     Layout — Editorial register
     ------------------------------------------------------------------------ */
  --width-prose: 680px;            /* Body prose — long-form readable */
  --width-narrow: 560px;           /* Italic reflections, intimate prose */
  --width-wide: 1200px;            /* Wide image breakouts, gallery */
  --width-page: 1440px;            /* Page container max */
  --width-content: 1080px;         /* Default content column */

  /* Page padding (horizontal) */
  --pad-mobile: var(--space-4);    /* 24px on mobile */
  --pad-tablet: var(--space-6);    /* 48px on tablet */
  --pad-desktop: var(--space-8);   /* 96px on desktop */

  /* ------------------------------------------------------------------------
     Borders & radii — restrained
     ------------------------------------------------------------------------ */
  --border-hairline: 1px;
  --border-thin: 2px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  /* No rounded corners on editorial blocks — sharp, considered */

  /* ------------------------------------------------------------------------
     Motion — measured, considered
     ------------------------------------------------------------------------ */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --motion-cinematic: 600ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-aman: cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------------------
     Z-index scale
     ------------------------------------------------------------------------ */
  --z-base: 1;
  --z-elevated: 10;
  --z-header: 50;
  --z-overlay: 100;
  --z-modal: 200;

  /* ------------------------------------------------------------------------
     Breakpoints (reference values — used in @media queries below)
     ------------------------------------------------------------------------ */
  /*
    --bp-sm:  640px   — small tablet
    --bp-md:  768px   — tablet
    --bp-lg: 1024px   — small desktop
    --bp-xl: 1280px   — desktop
    --bp-2xl: 1536px — large desktop
  */
}

/* ===========================================================================
   Reduced motion — honour user preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
    --motion-cinematic: 0ms;
  }
}


/* ==========================================================================
   Phase 5.A — Loewe Addendum v0.2 — Terracotta palette node
   Selectively deployed: Conservation, Sarawak/Borneo content, indigenous-craft attribution.
   ========================================================================== */

:root {
  --colour-terracotta: #A85B3D;
  --colour-terracotta-soft: #C2826A;
  --colour-terracotta-deep: #7E3F26;
}