/* ==========================================================================
   Cannon & Cannon Properties — Design Tokens
   "Modern Warmth" aesthetic: cream, deep purple, gold accents
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     Brand Colors
     ----------------------------------------------------------------------- */
  --color-purple-deep:   #512E4F;
  --color-purple-medium: #663872;
  --color-purple-muted:  #A682A4;
  --color-purple-dark:   #2D1A2C;

  --color-gold:       #E6C068;
  --color-gold-light: #F0D48A;
  --color-gold-dark:  #C4A050;

  --color-link:       #8B6914;  /* WCAG AA compliant on cream (4.6:1) */
  --color-link-hover: #6B5010;  /* darker gold hover (6.1:1) */

  /* -----------------------------------------------------------------------
     Neutral Colors
     ----------------------------------------------------------------------- */
  --color-cream:  #F6EFEA;
  --color-white:  #FFFFFF;

  --color-text-dark:   #2C2C2C;
  --color-text-medium: #666666;
  --color-text-light:  #767676;  /* WCAG AA 4.5:1 on cream */
  --color-border:      #E8E6E6;

  /* -----------------------------------------------------------------------
     Semantic Colors
     ----------------------------------------------------------------------- */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-sold:    #9E9E9E;

  /* Status badge pairs — backgrounds + foregrounds for badges/alerts */
  --color-success-bg:     #e8f5e9;
  --color-success-fg:     #2e7d32;
  --color-success-border: #4caf50;
  --color-warning-bg:     #fff3e0;
  --color-warning-fg:     #e65100;
  --color-error-bg:       #fbe9e7;
  --color-error-fg:       #c62828;
  --color-error-border:   #ff5722;
  --color-neutral-bg:     #f5f5f5;
  --color-neutral-fg:     #757575;

  /* Bootstrap-style danger (admin delete actions) + info blue */
  --color-danger:       #dc3545;
  --color-info-bg:      #e3f2fd;
  --color-info-fg:      #1565C0;

  /* Admin surface neutrals */
  --color-surface-subtle: #f8f8f8;
  --color-surface-hover:  #fafafa;

  /* -----------------------------------------------------------------------
     Typography — 1.25 ratio (Major Third)
     Fluid scaling via clamp(): body stays readable, headings scale smoothly
     from mobile → desktop without breakpoint overrides.
     ----------------------------------------------------------------------- */
  --text-xs:  0.75rem;   /* 12px  — raised from 10px for WCAG legibility */
  --text-sm:  0.875rem;  /* 14px  — raised from 12.8px */
  --text-base: 1rem;     /* 16px */
  --text-lg:  1.125rem;  /* 18px  — tightened from 20px */
  --text-xl:  clamp(1.25rem, 0.95rem + 1vw, 1.5rem);     /* 20-24px */
  --text-2xl: clamp(1.5rem,  1.1rem  + 1.5vw, 2rem);     /* 24-32px */
  --text-3xl: clamp(1.875rem, 1.2rem + 2.5vw, 2.5rem);   /* 30-40px */
  --text-4xl: clamp(2.25rem,  1.3rem + 4vw, 3.25rem);    /* 36-52px */

  /* Line heights — research-backed (Pimp My Type, Baymard) */
  --leading-tight:   1.15;  /* for display headings */
  --leading-snug:    1.25;  /* for h1-h3 */
  --leading-normal:  1.5;   /* body text sweet spot */
  --leading-relaxed: 1.65;  /* for long-form reading */

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* -----------------------------------------------------------------------
     Spacing — 8-point grid (with 4pt half-steps)
     Legacy names kept; numeric tokens added for clarity.
     ----------------------------------------------------------------------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* -----------------------------------------------------------------------
     SEMANTIC SPACING — Use these for layout, not raw tokens above.
     Fluid values scale smoothly from mobile to desktop.
     ----------------------------------------------------------------------- */

  /* Section vertical padding — 40px mobile → 80px desktop */
  --section-py:       clamp(2.5rem, 5vw, 5rem);
  /* Compact sections (like filters, headers) — 24px → 40px */
  --section-py-sm:    clamp(1.5rem, 3vw, 2.5rem);
  /* Major hero sections — 64px → 120px */
  --section-py-hero:  clamp(4rem, 8vw, 7.5rem);

  /* Space between content groups inside a section — 24px → 48px */
  --content-gap:      clamp(1.5rem, 3vw, 3rem);
  /* Space between inline elements — 12px → 16px */
  --inline-gap:       clamp(0.75rem, 1.5vw, 1rem);

  /* Hero min-height — cap at 640px, never 100vh (hurts mobile + short-viewport users) */
  --hero-min-h:       clamp(30rem, 70vh, 40rem);

  /* Content widths — narrow for prose, wide for grids */
  --max-w-prose:      65ch;      /* optimal reading line length */
  --max-w-content:    1200px;    /* grid/hero max-width */
  --max-w-wide:       1400px;

  /* -----------------------------------------------------------------------
     Radii
     ----------------------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 50%;

  /* -----------------------------------------------------------------------
     Shadows — purple-tinted for warmth
     ----------------------------------------------------------------------- */
  --shadow-sm:  0 2px  8px  rgba(81, 46, 79, 0.06);
  --shadow-md:  0 4px  16px rgba(81, 46, 79, 0.10);
  --shadow-lg:  0 8px  32px rgba(81, 46, 79, 0.14);
  --shadow-xl:  0 16px 48px rgba(81, 46, 79, 0.18);

  /* -----------------------------------------------------------------------
     Transitions
     ----------------------------------------------------------------------- */
  --transition: 200ms ease;
}