/**
 * Design Tokens , Bourne Builders
 * All CSS custom properties. Edit here to retheme the entire site.
 * @package BourneBuilders
 */

:root {

  /* ── Colours ───────────────────────────────────────────────────────────── */
  --color-navy:         #0D1B2A;   /* Primary brand deep navy */
  --color-navy-mid:     #1A2F45;   /* Secondary navy for hover states */
  --color-navy-light:   #243B55;   /* Lighter navy for cards on dark bg */
  --color-gold:         #B8966E;   /* Warm brass / canal hardware */
  --color-gold-light:   #D4B48A;   /* Hover state of gold */
  --color-ivory:        #F7F4EF;   /* Warm white page background */
  --color-ivory-dark:   #EDE9E1;   /* Subtle section dividers */
  --color-white:        #FFFFFF;
  --color-charcoal:     #2C3E50;   /* Dark text on light backgrounds */
  --color-slate:        #6B7C8D;   /* Secondary / muted text */
  --color-slate-light:  #A0AEBA;   /* Placeholder / label text */
  --color-border:       #DDD8CE;   /* Subtle borders */
  --color-error:        #C0392B;
  --color-success:      #27AE60;

  /* Photo placeholder */
  --color-photo-bg:     #E8E4DC;
  --color-photo-icon:   #A0988A;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-heading:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:    clamp(0.75rem,  0.7rem + 0.25vw, 0.8125rem);
  --text-sm:    clamp(0.875rem, 0.82rem + 0.27vw, 0.9375rem);
  --text-base:  clamp(1rem,     0.95rem + 0.25vw, 1.0625rem);
  --text-md:    clamp(1.0625rem,1rem + 0.3vw,  1.125rem);
  --text-lg:    clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl:    clamp(1.25rem,  1.1rem + 0.6vw,  1.5rem);
  --text-2xl:   clamp(1.5rem,   1.3rem + 0.9vw,  2rem);
  --text-3xl:   clamp(1.875rem, 1.5rem + 1.5vw,  2.5rem);
  --text-4xl:   clamp(2.25rem,  1.8rem + 2vw,    3.25rem);
  --text-5xl:   clamp(3rem,     2.2rem + 3.2vw,  5rem);
  --text-hero:  clamp(3.5rem,   2.5rem + 4vw,    6.5rem);

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.15em;

  /* ── Spacing (4px base grid) ───────────────────────────────────────────── */
  --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-7:    1.75rem;    /* 28px */
  --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 */
  --space-32:   8rem;       /* 128px */
  --space-section: clamp(4rem, 6vw, 7rem);

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --container-max:    1280px;
  --container-narrow: 760px;
  --container-wide:   1440px;
  --container-pad:    clamp(1.25rem, 4vw, 3rem);

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 9999px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-xs:    0 1px 3px rgba(13,27,42,0.06);
  --shadow-sm:    0 2px 8px rgba(13,27,42,0.08);
  --shadow-card:  0 4px 20px rgba(13,27,42,0.08), 0 1px 4px rgba(13,27,42,0.04);
  --shadow-lift:  0 12px 40px rgba(13,27,42,0.14), 0 2px 8px rgba(13,27,42,0.06);
  --shadow-modal: 0 24px 80px rgba(13,27,42,0.22);

  /* ── Transitions ───────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --transition-fast:   150ms var(--ease-out);
  --transition-base:   250ms var(--ease-out);
  --transition-slow:   400ms var(--ease-out);
  --transition-slower: 600ms var(--ease-out);

  /* ── Z-index ────────────────────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-header:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Header ─────────────────────────────────────────────────────────────── */
  --header-height: 80px;
  --header-height-solid: 68px;
}