/* ============================================================
   variables.css — Design Tokens for the Signature website
   ------------------------------------------------------------
   These are the single source of truth for colours, fonts,
   spacing and sizes. Change a value here and it updates the
   whole site. Do not hard-code colours or sizes elsewhere —
   always use these variables (for example: var(--color-onyx)).
   Values come from inputs/homepage-mockup-spec.md and
   inputs/brand-strategy.md.
   ============================================================ */

:root {
  /* ---- Brand colours (from the brand strategy) ---- */
  --color-onyx: #0E0E0E;            /* Primary dark background */
  --color-gold: #C9A84C;            /* Accent — use sparingly */
  --color-bronze: #8A7A5A;          /* Muted secondary text */
  --color-ivory: #F5F1E8;           /* Light surface / primary text on dark */
  --color-charcoal: #1E1C18;        /* Secondary dark background / cards */
  --color-linen: #E8DFC8;           /* Dividers, hairlines, subtle backgrounds */

  /* ---- Functional roles (mapped to the brand palette) ---- */
  --color-bg: var(--color-onyx);          /* Page background */
  --color-surface: var(--color-charcoal); /* Cards and panels */
  --color-text: var(--color-ivory);       /* Main text colour */
  --color-text-muted: var(--color-bronze);/* Captions, secondary text */
  --color-border: rgba(232, 223, 200, 0.18); /* Hairline borders (Linen, low opacity) */
  --color-accent: var(--color-gold);

  /* Success / Warning are NOT in the brand palette — placeholders (To be confirmed) */
  --color-success: #3E6B4F;  /* To be confirmed */
  --color-warning: #A8742A;  /* To be confirmed */

  /* ---- Typography ----
     Cambria and Calibri are the brand fonts (available on most Windows
     devices). Safe fallbacks are included for other devices.
     Primary heading face (Cambria vs Cormorant Garamond) is To be confirmed. */
  --font-heading: Cambria, "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Calibri Light", Calibri, "Segoe UI", Helvetica, Arial, sans-serif;

  --weight-body: 300;     /* Light — never bold in body or display copy */
  --tracking-wide: 0.06em;   /* Wide letter-spacing for headings */
  --tracking-caps: 0.20em;   /* +18–22% letter-spacing for all-caps/eyebrow text */

  /* ---- Font sizes (fluid where useful) ---- */
  --size-h1: clamp(40px, 6vw, 64px);
  --size-h2: clamp(28px, 4vw, 40px);
  --size-h3: 24px;
  --size-body: 16px;
  --size-small: 13px;
  --line-body: 1.7;

  /* ---- Spacing scale (4px base unit) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --section-spacing: var(--space-3xl); /* 96px desktop (reduced on mobile) */
  --card-padding: var(--space-lg);     /* 24px */

  /* ---- Layout ---- */
  --container-width: 1200px;
  --container-gutter: var(--space-lg); /* 24px */

  /* ---- Radius (small = crisp, tailored. To be confirmed) ---- */
  --radius-button: 2px;
  --radius-card: 4px;

  /* ---- Shadows (used only on hover; lightness is luxury) ---- */
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.35);

  /* ---- Logo sizing ---- */
  --logo-height-desktop: 44px;
  --logo-height-mobile: 32px;
}