/* ============================================================
   Logan Custom Homes — Design Tokens
   Brand brief: assets/brand/logan_brand_brief.md
   ============================================================ */

:root {

  /* --- Color --- */
  --charcoal:       #14141a;   /* Primary dark, backgrounds */
  --charcoal-deep:  #2a2823;   /* Deeper variant, text on bone */
  --bone:           #ede5d3;   /* Primary light, secondary background */
  --bronze:         #b8956a;   /* Primary accent, on dark */
  --bronze-warm:    #8a7558;   /* Secondary accent, subdued */
  --bronze-text:    #8a6f47;   /* Bronze as text on bone */
  --bronze-light:   #c9a574;   /* Brighter bronze on darkest backgrounds */

  /* --- Typography --- */
  --font-display:   'Cormorant SC', 'Georgia', serif;
  --font-accent:    'Playfair Display', 'Georgia', serif;
  --font-body:      'DM Sans', 'Inter', system-ui, sans-serif;

  /* --- Type Scale (min 18px body for older readers) --- */
  --text-xs:    0.75rem;    /* 12px — micro labels */
  --text-sm:    0.875rem;   /* 14px — nav, captions */
  --text-base:  1.125rem;   /* 18px — body minimum */
  --text-lg:    1.25rem;    /* 20px — preferred body */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.75rem;    /* 28px — H3 min */
  --text-3xl:   2rem;       /* 32px — H3 max / H2 min */
  --text-4xl:   2.5rem;     /* 40px */
  --text-5xl:   3rem;       /* 48px — H1 min */
  --text-6xl:   4rem;       /* 64px */
  --text-7xl:   4.5rem;     /* 72px — H1 max */

  /* --- Line Height --- */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;   /* Body copy — generous for readability */

  /* --- Letter Spacing --- */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  /* --- Spacing --- */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* --- Layout --- */
  --container-max:  1320px;
  --container-wide: 1600px;
  --gutter:         clamp(1.5rem, 5vw, 4rem);

  /* --- Transitions --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --duration-fast:   180ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --duration-hero:   800ms;
}