/* ============================================================================
   AUBURY & CO — DESIGN TOKENS
   Sage Whisper x Midnight Forest merged palette
   Confirmed by Lauren, 25 March 2026
   ============================================================================ */

:root {
  /* PRIMARY GREENS — Lauren's confirmed picks */
  --forest: #3D5740;           /* Sage Forest: "I like" — primary brand green, headers, buttons, accents */
  --forest-deep: #2C3E2D;      /* Forest Green: "Really, really like" — cards, backgrounds, depth */
  --forest-night: #151E17;     /* Night Forest: "I like" — footer, dramatic sections */

  /* WARM NEUTRALS — Lauren's confirmed picks */
  --linen: #E8E2D4;            /* Warm Linen: "Probably my favourite" — primary background */
  --candle: #E8DCC8;           /* Candle Light: "I do also like" — secondary bg, logo backgrounds, cards */
  --morning: #F7F5F0;          /* Morning Light: "Like as a white option" — light bg (check warmth) */
  --parchment: #D4C5A9;        /* Warm Parchment: "Has its place" — borders, dividers, midtone */
  --buttermilk: #F5EDE0;       /* Buttermilk: "I love that colour" — alt light bg, Instagram-friendly */
  --honey: #E8D9C0;            /* Honey Cream: "I also like" — accent warm tone, highlights */

  /* UTILITY */
  --ink: #1A1A1A;              /* Ink Black: "Has its place" — text, icons, high-contrast */

  /* SEMANTIC MAPPINGS — Use these in components */
  --bg-primary: var(--linen);          /* Main page background */
  --bg-secondary: var(--buttermilk);   /* Alternate sections */
  --bg-light: var(--morning);          /* Lightest sections */
  --bg-card: var(--candle);            /* Card backgrounds */
  --bg-dark: var(--forest-deep);       /* Dark sections */
  --bg-darkest: var(--forest-night);   /* Footer, dramatic */

  --text-primary: var(--ink);          /* Headings, dark text */
  --text-body: #4A4A4A;               /* Body copy */
  --text-muted: #8A8275;              /* Secondary text */
  --text-light: var(--buttermilk);     /* Text on dark backgrounds */

  --accent-primary: var(--forest);     /* Buttons, links, nav */
  --accent-warm: var(--honey);         /* Warm highlights */
  --accent-mid: var(--parchment);      /* Borders, dividers */

  /* REJECTED — DO NOT USE */
  /* Gold/Antique Brass — "Gold is done." Explicit, repeated rejection */
  /* Mint Green — "Reminds me of dentistry." Strong negative x4 */
  /* Terracotta/Orange — "I don't think the orange works." */
  /* Grey tones — "I hate grey so much." */
  /* Pure white #FFFFFF — "Looks unfinished." Always use warm backgrounds */

  /* BORDERS & DIVIDERS */
  --border-light: var(--linen);
  --border-medium: var(--parchment);
  --border-dark: var(--text-muted);

  /* BACKWARD COMPATIBILITY — old variable names mapped to new palette */
  --warm-white: var(--morning);        /* was #F7F5F0 */
  --champagne: var(--parchment);       /* was #D4C9A8 → now #D4C5A9 */
  --meadow: #6B8A6E;                   /* Meadow Sage — kept for hover states */
  --cream: var(--buttermilk);           /* was #F0EDE8 → now #F5EDE0 */
  --charcoal: var(--text-body);        /* was #4A4A4A */
  --muted: var(--text-muted);          /* was #8A8275 */
  --light-text: var(--text-light);     /* was #F5F1ED */
  /* --forest-deep: already defined above as #2C3E2D — no alias needed */

  /* TYPOGRAPHY */
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* FONT SIZES */
  --text-xs: 0.75rem;          /* 12px */
  --text-sm: 0.875rem;         /* 14px */
  --text-base: 1rem;           /* 16px */
  --text-lg: 1.125rem;         /* 18px */
  --text-xl: 1.25rem;          /* 20px */
  --text-2xl: 1.5rem;          /* 24px */
  --text-3xl: 1.875rem;        /* 30px */
  --text-4xl: 2.25rem;         /* 36px */
  --text-5xl: 2.875rem;        /* 46px */
  --text-6xl: 3.75rem;         /* 60px */

  /* FONT WEIGHTS */
  --weight-300: 300;           /* Light */
  --weight-400: 400;           /* Regular */
  --weight-500: 500;           /* Medium */
  --weight-600: 600;           /* Semibold */
  --weight-700: 700;           /* Bold */

  /* SPACING SCALE */
  --space-0: 0;
  --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 */

  /* LINE HEIGHT */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.875;

  /* LETTER SPACING */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.16em;

  /* SHADOWS */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05);
  --shadow-md: 0 4px 6px rgba(26, 26, 26, 0.1);
  --shadow-lg: 0 10px 15px rgba(26, 26, 26, 0.1);
  --shadow-xl: 0 20px 25px rgba(26, 26, 26, 0.15);
  --shadow-2xl: 0 25px 50px rgba(26, 26, 26, 0.2);

  /* BORDER RADIUS */
  --radius-sm: 0.25rem;        /* 4px */
  --radius-md: 0.5rem;         /* 8px */
  --radius-lg: 1rem;           /* 16px */
  --radius-xl: 1.5rem;         /* 24px */
  --radius-2xl: 2rem;          /* 32px */
  --radius-full: 9999px;       /* Pill button */

  /* TRANSITIONS */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-INDEX SCALE */
  --z-hide: -1;
  --z-auto: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;

  /* BREAKPOINTS */
  --bp-xs: 375px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* IMAGE ASPECT RATIOS */
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-4-3: 4 / 3;
  --aspect-3-2: 3 / 2;
  --aspect-tall: 2 / 3;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}