/* ═══════════════════════════════════════════════════════════════════
   CORE PALETTE - Original Brand Colors
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* Base Colors */
    --color-reddish: #860116;
    --color-pinkish: #fbabb7;
    --color-ultra-violet: #625E7B;
    --color-dark-green: #3E4A08;
    --color-medium-green: #738A46;
    --color-brown: #563C31;
    --color-light-brown: #8B6D5C;

    /* ─────────────────────────────────────────
       REDDISH FAMILY (#860116)
       Use: CTAs, sale badges, emphasis, hearts
       ───────────────────────────────────────── */
    --color-reddish-100: #fce8eb;
    --color-reddish-200: #f4b8c1;
    --color-reddish-300: #cc6679;
    --color-reddish-400: #a33347;
    --color-reddish-500: #860116;
    --color-reddish-600: #6b0112;
    --color-reddish-700: #50010d;
    --color-reddish-800: #350009;

    /* ─────────────────────────────────────────
       PINKISH FAMILY (#fbabb7)
       Use: Soft backgrounds, cards, highlights
       ───────────────────────────────────────── */
    --color-pinkish-100: #fef5f7;
    --color-pinkish-200: #fde3e8;
    --color-pinkish-300: #fccfd7;
    --color-pinkish-400: #fbabb7;
    --color-pinkish-500: #f78899;
    --color-pinkish-600: #e8667a;
    --color-pinkish-700: #c9485d;
    --color-pinkish-800: #a33347;

    /* ─────────────────────────────────────────
       ULTRA-VIOLET FAMILY (#625E7B)
       Use: Body backgrounds, depth, sophistication
       ───────────────────────────────────────── */
    --color-violet-100: #f0eff3;
    --color-violet-200: #d4d2dc;
    --color-violet-300: #a8a4b8;
    --color-violet-400: #8581a0;
    --color-violet-500: #625E7B;
    --color-violet-600: #4f4c64;
    --color-violet-700: #3d3a4d;
    --color-violet-800: #2a2836;

    /* ─────────────────────────────────────────
       DARK GREEN FAMILY (#3E4A08)
       Use: Buttons, nature accents, success
       ───────────────────────────────────────── */
    --color-green-dark-100: #f0f2e6;
    --color-green-dark-200: #d4dbb5;
    --color-green-dark-300: #98a84a;
    --color-green-dark-400: #6b7929;
    --color-green-dark-500: #3E4A08;
    --color-green-dark-600: #323b06;
    --color-green-dark-700: #252c05;
    --color-green-dark-800: #191d03;

    /* ─────────────────────────────────────────
       MEDIUM GREEN FAMILY (#738A46)
       Use: Hero backgrounds, organic sections
       ───────────────────────────────────────── */
    --color-green-medium-100: #f4f6f0;
    --color-green-medium-200: #dce4cf;
    --color-green-medium-300: #b5c499;
    --color-green-medium-400: #94a770;
    --color-green-medium-500: #738A46;
    --color-green-medium-600: #5c6e38;
    --color-green-medium-700: #45532a;
    --color-green-medium-800: #2e371c;

    /* ─────────────────────────────────────────
       BROWN FAMILY (#563C31)
       Use: Footer, grounding elements, warmth
       ───────────────────────────────────────── */
    --color-brown-100: #f5f1ef;
    --color-brown-200: #e0d5d0;
    --color-brown-300: #b9a89e;
    --color-brown-400: #8a7267;
    --color-brown-500: #563C31;
    --color-brown-600: #452f27;
    --color-brown-700: #34231d;
    --color-brown-800: #231713;

    /* ─────────────────────────────────────────
       LIGHT BROWN FAMILY (#8B6D5C)
       Use: Accents, borders, secondary elements
       ───────────────────────────────────────── */
    --color-brown-light-100: #f8f5f3;
    --color-brown-light-200: #e8dfd9;
    --color-brown-light-300: #cdbfb4;
    --color-brown-light-400: #ac9688;
    --color-brown-light-500: #8B6D5C;
    --color-brown-light-600: #70584a;
    --color-brown-light-700: #554338;
    --color-brown-light-800: #3a2e26;

    /* ═══════════════════════════════════════════════════════════════════
       FUNCTIONAL COLORS - Semantic Usage
       ═══════════════════════════════════════════════════════════════════ */

    /* Backgrounds */
    --bg-body: var(--color-violet-500);
    --bg-body-soft: var(--color-violet-400);
    --bg-section-light: var(--color-pinkish-100);
    --bg-section-warm: var(--color-brown-100);
    --bg-card: rgba(255, 255, 255, 0.08);
    --bg-card-hover: rgba(255, 255, 255, 0.12);
    --bg-overlay: rgba(98, 94, 123, 0.85);

    /* Header & Footer */
    --bg-header: var(--color-reddish-400);
    --bg-header-scroll: var(--color-reddish-500);
    --bg-footer: var(--color-brown-500);
    --bg-footer-accent: var(--color-brown-600);

    /* Hero Section */
    --bg-hero-primary: var(--color-green-medium-500);
    --bg-hero-secondary: var(--color-green-medium-400);
    --bg-hero-gradient-start: var(--color-green-medium-600);
    --bg-hero-gradient-end: var(--color-brown-light-500);

    /* Text Colors */
    --text-primary: #F8F8F2;
    --text-secondary: rgba(248, 248, 242, 0.85);
    --text-muted: rgba(248, 248, 242, 0.65);
    --text-on-light: var(--color-brown-700);
    --text-on-pink: var(--color-brown-800);

    /* Interactive Elements */
    --btn-primary-bg: var(--color-green-dark-500);
    --btn-primary-hover: var(--color-green-dark-400);
    --btn-primary-active: var(--color-green-dark-600);
    --btn-secondary-bg: var(--color-brown-500);
    --btn-secondary-hover: var(--color-brown-400);
    --btn-cta-bg: var(--color-reddish-500);
    --btn-cta-hover: var(--color-reddish-400);

    /* Accents & Highlights */
    --accent-primary: var(--color-brown-light-500);
    --accent-warm: var(--color-reddish-300);
    --accent-cool: var(--color-violet-300);

    /* Borders & Dividers */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-on-light: var(--color-brown-light-200);

    /* Shadows */
    --shadow-color: rgba(42, 40, 54, 0.3);
    --shadow-warm: rgba(86, 60, 49, 0.2);

    /* Font families */
    --font-primary: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-heading: 'Cormorant Garamond', 'Georgia', serif;
    --font-accent: 'Playfair Display', serif;

    /* Type scale (fluid) */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
    --text-3xl: clamp(2rem, 1.75rem + 1.25vw, 2.5rem);
    --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
    --text-5xl: clamp(3rem, 2.25rem + 3.75vw, 4.5rem);

    /* Line heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Breakpoint values (for reference) */
    --bp-xs: 320px;
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1536px;
}