/* ==========================================================================
   Real Granite Alberta — Design tokens
   Single source of truth for colour, type, spacing, radius, shadow & motion.
   ========================================================================== */

:root {
  /* ---- Colour: brand ---------------------------------------------------- */
  --color-graphite: #1c1814;        /* primary dark: text, dark sections */
  --color-graphite-90: #26211c;     /* raised surfaces on dark */
  --color-graphite-80: #3a332c;     /* borders on dark */
  --color-ivory: #f7f2ea;           /* main background */
  --color-ivory-deep: #efe7da;      /* alternate section background */
  --color-white: #fffdf9;
  --color-stone: #b9b1a6;           /* neutral surfaces, borders */
  --color-stone-light: #ddd5c9;     /* hairlines on ivory */
  --color-stone-dark: #6b635a;      /* muted text on ivory (AA: 5.6:1) */
  --color-brass: #c9894f;           /* accent: CTAs, dividers (decorative / on dark) */
  --color-brass-light: #ddb07f;     /* hover on dark */
  --color-brass-ink: #8c5527;       /* brass used as text on ivory (AA: 5.4:1) */
  --color-ember: #e8874a;           /* logo mountain colour */

  /* ---- Colour: semantic ----------------------------------------------- */
  --color-bg: var(--color-ivory);
  --color-text: var(--color-graphite);
  --color-text-muted: var(--color-stone-dark);
  --color-text-on-dark: #f3ece1;
  --color-text-on-dark-muted: #bdb3a6; /* AA on graphite: 8.4:1 */
  --color-border: var(--color-stone-light);
  --color-focus: #2a6fdb;
  --color-success: #2f6b46;
  --color-error: #a3321f;

  /* ---- Gradients ------------------------------------------------------- */
  --gradient-hero: linear-gradient(100deg, rgba(20, 16, 12, 0.95) 0%, rgba(20, 16, 12, 0.86) 50%, rgba(20, 16, 12, 0.4) 100%);
  --gradient-page-hero: linear-gradient(180deg, rgba(20, 16, 12, 0.78) 0%, rgba(20, 16, 12, 0.92) 100%);
  --gradient-ivory: linear-gradient(180deg, var(--color-ivory) 0%, var(--color-ivory-deep) 100%);
  --gradient-glow: radial-gradient(60% 80% at 85% 20%, rgba(201, 137, 79, 0.22) 0%, rgba(201, 137, 79, 0) 70%);
  --gradient-image-fade: linear-gradient(180deg, rgba(20, 16, 12, 0) 40%, rgba(20, 16, 12, 0.85) 100%);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-body: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid scale (min @ 320px → max @ 1440px) */
  --text-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.27rem + 0.5vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.55rem + 1vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.9rem + 1.7vw, 3.5rem);
  --text-4xl: clamp(2.75rem, 2.2rem + 2.8vw, 4.75rem);
  --text-5xl: clamp(3rem, 2.3rem + 3.6vw, 5.75rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.65;
  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  /* ---- Spacing (8px base) ------------------------------------------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-11: 6rem;    /* 96 */
  --space-12: 8rem;    /* 128 */
  --section-y: clamp(4rem, 2.8rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 1280px;
  --container-narrow: 760px;
  --header-h: 76px;

  /* ---- Radius & shadow ------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(28, 24, 20, 0.06), 0 2px 8px rgba(28, 24, 20, 0.05);
  --shadow-md: 0 10px 30px -12px rgba(28, 24, 20, 0.25);
  --shadow-lg: 0 30px 60px -20px rgba(28, 24, 20, 0.35);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 700ms;

  /* ---- Layers ---------------------------------------------------------- */
  --z-header: 100;
  --z-whatsapp: 90;
  --z-menu: 110;
  --z-lightbox: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}