/* ==========================================================================
   THE MATT HORN GROUP — DESIGN SYSTEM
   Warm hometown expert aesthetic. Not luxury. Not tech-forward.
   Palette derived from Matt's official gold cursive logo.
   ========================================================================== */

:root, [data-theme="light"] {
  /* --- SURFACES (warm ivory, cream, off-white) --- */
  --color-bg:               #F8F5EF;   /* warm ivory — primary background */
  --color-surface:          #FFFFFF;   /* pure white — cards, elevated surfaces */
  --color-surface-2:        #FDFBF6;   /* softest cream */
  --color-surface-offset:   #EFE9DD;   /* slightly darker cream — section alternation */
  --color-surface-offset-2: #E4DCC9;   /* deeper warm sand — footer legal strip */
  --color-surface-dynamic:  #F3EEE2;   /* subtle hover surface */
  --color-divider:          #E4DCC9;
  --color-border:           #D4C9AF;

  /* --- TEXT (deep charcoal, warm grays) --- */
  --color-text:             #1A1A1A;   /* near-black for primary text */
  --color-text-muted:       #5A554A;   /* warm gray for secondary text */
  --color-text-faint:       #928B7B;   /* softer secondary */
  --color-text-inverse:     #FDFBF6;

  /* --- PRIMARY ACCENT (Champagne Gold from the logo) --- */
  --color-primary:          #C9A961;   /* champagne gold — signature accent */
  --color-primary-hover:    #B08F45;   /* deeper on hover */
  --color-primary-active:   #8B6F3A;   /* deep antique gold */
  --color-primary-highlight: #F0E5C7;  /* very pale gold for backgrounds */

  /* --- SECONDARY ACCENT (Deep Gold for hover states) --- */
  --color-gold-deep:        #8B6F3A;
  --color-olive-gold:       #8B8956;

  /* --- SEMANTIC (kept minimal — this is a business site, not a dashboard) --- */
  --color-success:          #547A45;
  --color-warning:          #B08F45;
  --color-error:            #A63A38;

  /* --- KW BRAND (used only in the compliance zone) --- */
  --color-kw-red:           #CC2229;
  --color-kw-gray:          #5A5A5A;

  /* --- RADIUS --- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* --- TRANSITIONS --- */
  --transition-interactive: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:        480ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- SHADOWS (warm-toned) --- */
  --shadow-sm: 0 1px 3px oklch(0.3 0.02 60 / 0.08);
  --shadow-md: 0 4px 14px oklch(0.3 0.02 60 / 0.10);
  --shadow-lg: 0 12px 32px oklch(0.3 0.02 60 / 0.14);
  --shadow-gold: 0 4px 20px oklch(0.7 0.10 80 / 0.20);

  /* --- CONTENT WIDTHS --- */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:   1200px;
  --content-full:   100%;

  /* --- FONTS ---
     Playfair Display: elegant serif matching Matt's cursive logo (headlines only)
     Cormorant Garamond: warm literary serif for hero display type
     Inter: clean, readable sans-serif for body and UI (approachable, not corporate) */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-serif:   'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
}

/* ==========================================================================
   TYPE SCALE — fluid, mobile-first
   ========================================================================== */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem + 0.25vw, 0.875rem);   /* 12 → 14 */
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);        /* 14 → 16 */
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);   /* 16 → 18 */
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);        /* 18 → 24 */
  --text-xl:   clamp(1.5rem,   1.2rem + 1.25vw, 2.25rem);     /* 24 → 36 */
  --text-2xl:  clamp(2rem,     1.2rem + 2.5vw, 3.5rem);       /* 32 → 56 */
  --text-3xl:  clamp(2.5rem,   1rem + 4vw, 5rem);             /* 40 → 80 */
  --text-hero: clamp(3rem,     0.5rem + 7vw, 8rem);           /* 48 → 128 */
}

/* ==========================================================================
   4PX SPACING SYSTEM
   ========================================================================== */
:root {
  --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 */
}