/* ==========================================================================
   Chuk Yip Company — Design Tokens (CSS custom properties)
   Private UI prototype · REVIEW DRAFT · Gate B design review
   Direction: "Luxury + Engineering" — warm white, charcoal, restrained
   muted gold, generous whitespace, technical/CAD detailing.
   ========================================================================== */

:root {
  /* --- Color: base palette --- */
  --color-bg: #FAF8F5;          /* warm white page background */
  --color-surface: #FFFFFF;     /* cards, panels, alternating sections */
  --color-text: #23211E;        /* charcoal, primary text (~15:1 on bg) */
  --color-text-muted: #5C574E;  /* secondary text (~6.8:1 on bg) */
  --color-border: #E4DED4;      /* hairline borders (decorative only) */

  /* --- Color: muted gold accent (use sparingly) --- */
  --color-accent: #9A7B4F;        /* borders, large/bold details only (~3.7:1 — not for small text) */
  --color-accent-strong: #7E6238; /* small-text accents, e.g. eyebrows (~5.4:1 on bg, AA) */
  --color-accent-soft: #F4EFE7;   /* faint warm wash for hover/selected surfaces */
  --color-accent-on-dark: #C9B08A;/* gold tint for dark surfaces (~7.5:1 on charcoal) */

  /* --- Color: semantic (each ≥4.5:1 against its paired background) --- */
  --color-error: #B3261E;         /* ~6.2:1 on --color-bg and --color-error-bg */
  --color-error-bg: #FCECEA;
  --color-success: #1E6B34;       /* ~6.2:1 on --color-bg, ~5.9:1 on --color-success-bg */
  --color-success-bg: #E9F5EC;

  /* --- Typography (system stacks only, no webfonts) --- */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  /* Fluid type scale: body 16–18px, headings scale with viewport */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: clamp(1rem, 0.9649rem + 0.1754vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.3125rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.625rem);
  --text-4xl: clamp(2.125rem, 1.6rem + 2.625vw, 3.25rem);

  --leading-tight: 1.15;
  --leading-heading: 1.25;
  --leading-body: 1.6;

  --measure: 68ch;         /* prose line length target 65–75ch */

  /* --- Spacing: 8px scale --- */
  --space-1: 0.5rem;    /*  8px */
  --space-2: 1rem;      /* 16px */
  --space-3: 1.5rem;    /* 24px */
  --space-4: 2rem;      /* 32px */
  --space-5: 2.5rem;    /* 40px */
  --space-6: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-section: clamp(4rem, 3rem + 5vw, 7rem); /* vertical rhythm between sections */

  /* --- Layout --- */
  --max-width: 75rem;   /* 1200px max content width */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --breakpoint-nav: 64em; /* 1024px — mobile nav below, desktop nav at/above */

  /* --- Detail --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgb(35 33 30 / 0.06);
  --shadow-md: 0 4px 16px rgb(35 33 30 / 0.08);

  /* --- Focus: visible ring, never removed --- */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--color-accent-strong);
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

  /* --- Motion (only applied inside prefers-reduced-motion: no-preference) --- */
  --duration-fast: 120ms;
  --duration-med: 200ms;
  --ease-standard: ease-out;

  /* --- Z-index --- */
  --z-sticky-cta: 90;
  --z-header-submenu: 100;
  --z-ribbon: 200;
  --z-skip-link: 300;
}