/* ==========================================================================
   DESIGN TOKENS — Exterior Images
   All custom properties for the design system. Every other CSS file
   references these tokens. Change values here to update the entire site.
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --ink:          #2C2C2C;
  --ink-light:    #4A4A4A;
  --ink-muted:    #6B6B6B;
  --parchment:    #FAF8F5;
  --warm-white:   #FFFFFF;
  --sage:         #7A8B6F;
  --sage-light:   #95A78A;
  --sage-dark:    #5F6E55;
  --terracotta:   #C4724E;
  --terracotta-light: #D4896A;
  --terracotta-dark:  #A85D3D;
  --stone:        #A69F95;
  --stone-light:  #C4BEB6;
  --cream:        #F0EBE3;
  --cream-dark:   #E3DCD2;

  /* Functional colors */
  --color-text:        var(--ink);
  --color-text-light:  var(--ink-light);
  --color-text-muted:  var(--ink-muted);
  --color-bg:          var(--parchment);
  --color-bg-alt:      var(--cream);
  --color-bg-card:     var(--warm-white);
  --color-primary:     var(--terracotta);
  --color-primary-hover: var(--terracotta-dark);
  --color-secondary:   var(--sage);
  --color-secondary-hover: var(--sage-dark);
  --color-border:      var(--stone-light);
  --color-border-light: #E5E0DA;

  /* Overlay */
  --overlay-dark:  rgba(44, 44, 44, 0.65);
  --overlay-light: rgba(250, 248, 245, 0.92);

  /* ---- Typography ---- */
  --font-heading:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'Raleway', 'Helvetica Neue', sans-serif;
  --font-accent:   'Cormorant SC', 'Georgia', serif;

  /* Type scale (Major Third — 1.25) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  4.5rem;     /* 72px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* ---- Spacing (8px base) ---- */
  --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 */
  --space-32: 8rem;      /* 128px */

  /* ---- Layout ---- */
  --max-width:      1200px;
  --max-width-narrow: 800px;
  --max-width-prose:  65ch;
  --container-padding: var(--space-6);
  --section-padding:   var(--space-24);
  --section-padding-sm: var(--space-16);

  /* ---- Borders ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-full: 9999px;
  --border-thin:  1px solid var(--color-border);
  --border-light: 1px solid var(--color-border-light);

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 3px rgba(44, 44, 44, 0.06);
  --shadow-md:  0 4px 12px rgba(44, 44, 44, 0.08);
  --shadow-lg:  0 8px 30px rgba(44, 44, 44, 0.12);
  --shadow-xl:  0 16px 50px rgba(44, 44, 44, 0.16);

  /* ---- Transitions ---- */
  --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:  cubic-bezier(0.42, 0, 0.58, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --transition-base: all var(--duration-normal) var(--ease-out);

  /* ---- Z-Index Scale ---- */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}