/**
 * assets/css/variables.css
 * -------------------------
 * Design tokens — the single source of truth for all colours,
 * spacing, fonts, and shadows across the entire site.
 *
 * Future developers: change brand colours here ONLY.
 * Everything else in the CSS reads from these variables.
 */

:root {
  /* ── Brand Colours ─────────────────────────── */
  --color-primary:       #c07840;   /* caramel / warm orange */
  --color-primary-hover: #d4924e;
  --color-gold:          #d4a843;   /* gold accents */
  --color-brown:         #3b1f0e;   /* deep chocolate brown */
  --color-dark:          #1a0a02;   /* near-black for backgrounds */

  /* ── Surface Colours ───────────────────────── */
  --color-bg:            #fff8f0;   /* warm off-white page background */
  --color-surface:       #fdf5eb;   /* slightly warmer – cards, sections */
  --color-surface-dark:  #2c120500; /* transparent dark overlay */

  /* ── Text Colours ──────────────────────────── */
  --color-text:          #2c1505;   /* primary body text */
  --color-text-muted:    #6b3d20;   /* secondary / caption text */
  --color-text-light:    #c9a882;   /* text on dark backgrounds */
  --color-text-inverse:  #fdf5eb;   /* headings on dark backgrounds */

  /* ── Typography ────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', Helvetica, Arial, sans-serif;

  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-lg:   1.125rem;  /*  18px */
  --text-xl:   1.25rem;   /*  20px */
  --text-2xl:  1.5rem;    /*  24px */
  --text-3xl:  1.875rem;  /*  30px */
  --text-4xl:  2.25rem;   /*  36px */
  --text-5xl:  3rem;      /*  48px */
  --text-6xl:  4rem;      /*  64px */

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-wide:   0.1em;
  --tracking-wider:  0.15em;
  --tracking-widest: 0.25em;

  /* ── Spacing Scale ─────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Border Radius ─────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────── */
  --shadow-sm:  0 2px 8px  rgba(59, 31, 14, 0.06);
  --shadow-md:  0 4px 24px rgba(59, 31, 14, 0.10);
  --shadow-lg:  0 12px 40px rgba(59, 31, 14, 0.16);
  --shadow-xl:  0 24px 64px rgba(59, 31, 14, 0.22);

  /* ── Layout ────────────────────────────────── */
  --container-max: 1100px;
  --nav-height:    72px;

  /* ── Transitions ───────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;
}