/* ==========================================================================
   TC Custom Woodworking — Design Tokens
   Carved walnut + gold, matched to the shop lockup and business card.
   Every component in site.css reads from these variables.
   ========================================================================== */

:root {
  /* --- Carved walnut & gold ------------------------------------------- */
  --c-bark:        #120c08;  /* deepest walnut — header, footer, hero */
  --c-walnut:      #3a2416;
  --c-oak:         #c9a45a;  /* carved gold */
  --c-maple:       #e6d09a;  /* gold highlight */
  --c-moss:        #6b4e2e;  /* leftover forest token, retinted to walnut */
  --c-moss-deep:   #1a100a;
  --c-ember:       #c9a45a;  /* gold is the action color */
  --c-ember-hover: #e0c48a;

  /* --- Surfaces --------------------------------------------------------- */
  --c-canvas:      #1a100a;  /* page background — dark walnut */
  --c-panel:       #24160e;
  --c-panel-alt:   #1f140c;
  --c-line:        #3d2a18;
  --c-line-strong: #c9a45a;

  /* --- Text ------------------------------------------------------------- */
  --c-ink:         #f0e6d0;
  --c-ink-soft:    #c4b496;
  --c-ink-invert:  #f0e6d0;
  --c-ink-invert-soft: #c4b496;

  /* --- Feedback --------------------------------------------------------- */
  --c-ok:          #7d9a62;
  --c-warn:        #c9a45a;
  --c-error:       #c45a48;

  /* --- Focus ------------------------------------------------------------ */
  --c-focus:       #e6d09a;
  --focus-ring:    0 0 0 3px var(--c-canvas), 0 0 0 5px var(--c-focus);
  --focus-ring-dark: 0 0 0 3px var(--c-bark), 0 0 0 5px var(--c-maple);

  /* --- Typography ------------------------------------------------------- */
  --font-display: Cinzel, "Trajan Pro", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body:    "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;

  --w-body:      400;
  --w-medium:    500;
  --w-heading:   600;
  --w-bold:      700;

  /* Fluid scale — min at 360px viewport, max at 1440px */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);
  --t-xl:   clamp(1.25rem, 1.13rem + 0.53vw, 1.5rem);
  --t-2xl:  clamp(1.5rem, 1.29rem + 0.93vw, 2rem);
  --t-3xl:  clamp(1.875rem, 1.5rem + 1.67vw, 2.75rem);
  --t-4xl:  clamp(2.25rem, 1.55rem + 3.1vw, 3.75rem);

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.65;
  --track-wide: 0.08em;

  /* --- Spacing — 8px increment core ------------------------------------- */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  40px;
  --s-6:  48px;
  --s-8:  64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-half: 4px;

  /* Section rhythm shrinks on small screens */
  --section-y: clamp(48px, 6vw, 96px);

  /* --- Shape ------------------------------------------------------------ */
  --radius-sm: 2px;   /* buttons, inputs — engraved plaque, not pill */
  --radius-lg: 4px;   /* cards, panels, media */
  --radius-pill: 999px; /* numeric badges only */

  /* Texture is a quiet layer, not decoration. Keep grain overlays <= 0.13. */
  --texture-opacity: 0.13;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-flat:    none;
  --shadow-raised:  0 1px 2px rgba(42, 32, 25, 0.06), 0 2px 8px rgba(42, 32, 25, 0.06);
  --shadow-lifted:  0 10px 15px -3px rgba(42, 32, 25, 0.14), 0 4px 6px -4px rgba(42, 32, 25, 0.10);
  --shadow-overlay: 0 25px 50px -12px rgba(42, 32, 25, 0.45);

  /* --- Layout ----------------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1440px;
  --container-text: 68ch;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 84px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* --- Z-index architecture --------------------------------------------- */
  --z-base:    0;
  --z-header:  10;
  --z-popover: 20;
  --z-overlay: 50;
}