/* ==========================================================================
   Elbow Room Design Tokens (CSS Custom Properties)

   LUXURY REDESIGN - Bold Citron as Signature Color

   Brand Identity:
   - Signature: Citron Green (#b5b800) - used dramatically in large format
   - Accent: Warm Gold (#C4A35A) - subtle highlights only
   - Neutrals: Cream (#FAF9F7), Walnut (#422510), Deep Walnut (#2A1A0A)
   - Typography: Quiche (headings), Libre Baskerville (subheadings), Raleway Light (body)
   ========================================================================== */

:root {
    /* ===== ELBOW ROOM BRAND COLORS ===== */

    /* Signature - Citron Green (use boldly, dramatically) */
    --color-primary: #b5b800;
    --color-primary-light: #c9cc33;
    --color-primary-dark: #8a8b00;
    --color-primary-text: #5a5b00;       /* Dark Citron - accessible for text on light backgrounds (5.3:1 on bone) */
    --color-primary-contrast: #ffffff;

    /* Accent - Warm Gold (use sparingly for highlights) */
    --color-secondary: #C4A35A;
    --color-secondary-light: #d4b87a;
    --color-secondary-dark: #a8893d;
    --color-secondary-contrast: #000000;

    /* Legacy accent aliases (keeping for compatibility, prefer gold) */
    --color-accent: #C4A35A;           /* Now maps to gold */
    --color-accent-light: #d4b87a;
    --color-accent-dark: #a8893d;
    --color-accent-contrast: #000000;

    --color-accent-teal: #3ee3d4;      /* Elbow Room Teal - color pop accent */
    --color-accent-yellow: #C4A35A;    /* Deprecated: use gold instead */
    --color-accent-gold: #C4A35A;      /* Warm Gold - primary accent */

    /* Neutral Colors - Luxury Palette */
    --color-bone: #FAF9F7;             /* Warm Cream - primary background */
    --color-walnut: #422510;           /* Walnut Brown - primary text */
    --color-walnut-deep: #2A1A0A;      /* Deep Walnut - footer, dramatic sections */

    --color-white: #ffffff;
    --color-gray-50: #f8f7f7;          /* Bone White */
    --color-gray-100: #f0efef;
    --color-gray-200: #e0dede;
    --color-gray-300: #c5c3c3;
    --color-gray-400: #9a9797;
    --color-gray-500: #6e6b6b;
    --color-gray-600: #524f4f;
    --color-gray-700: #3d3939;
    --color-gray-800: #2a2727;
    --color-gray-900: #422510;         /* Walnut Brown */
    --color-black: #000000;

    /* Compatibility aliases (for module CSS) */
    --color-off-white: var(--color-bone);
    --color-light: var(--color-gray-100);
    --color-gray-light: var(--color-gray-200);
    --color-gray: var(--color-gray-500);
    --color-gray-dark: var(--color-gray-700);
    --color-dark: var(--color-walnut);

    /* Semantic Colors */
    --color-success: #38a169;
    --color-warning: #dd6b20;
    --color-error: #e53e3e;
    --color-info: #3182ce;

    /* ===== TYPOGRAPHY ===== */

    /* Font Families */
    --font-heading: 'Quiche', Georgia, serif;
    --font-subheading: 'Libre Baskerville', Georgia, serif;
    --font-body: 'Raleway', 'Nunito', system-ui, sans-serif;

    /* Aliases */
    --font-primary: var(--font-body);
    --font-secondary: var(--font-heading);
    --font-sans: var(--font-body);

    /* 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: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4.5rem;      /* 72px */

    /* Line Heights - Luxury (more generous) */
    --leading-tight: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* Letter Spacing - Luxury Refinement */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --tracking-heading: 0.02em;        /* Elegant heading spacing */

    /* Font Weights - Luxury (lighter is more elegant) */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ===== SPACING ===== */

    --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 */

    /* Section Spacing - Luxury (generous whitespace) */
    --section-sm: 5rem;
    --section-md: 8rem;
    --section-lg: 12rem;
    --section-xl: 16rem;

    /* ===== LAYOUT ===== */

    /* Containers */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;

    /* Grid - Luxury (more breathing room) */
    --grid-columns: 12;
    --grid-gutter: 2.5rem;

    /* ===== BORDERS ===== */

    /* Border Radius - Luxury (sharper, more architectural) */
    --radius-none: 0;
    --radius-xs: 0.125rem;             /* 2px - buttons, subtle curves */
    --radius-sm: 0.25rem;              /* 4px - cards, inputs */
    --radius-md: 0.375rem;             /* 6px - slightly larger elements */
    --radius-lg: 0.5rem;               /* 8px - reserved for special cases */
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* Border Width */
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 4px;

    /* ===== SHADOWS ===== */

    /* Luxury shadows - subtle, refined */
    --shadow-sm: 0 1px 2px 0 rgb(66 37 16 / 0.04);
    --shadow-md: 0 2px 8px -2px rgb(66 37 16 / 0.08);
    --shadow-lg: 0 4px 16px -4px rgb(66 37 16 / 0.1);
    --shadow-xl: 0 8px 24px -6px rgb(66 37 16 / 0.12);
    --shadow-2xl: 0 16px 48px -12px rgb(66 37 16 / 0.15);
    --shadow-inner: inset 0 1px 2px 0 rgb(66 37 16 / 0.04);
    --shadow-none: none;

    /* Signature color shadows (for Citron elements) */
    --shadow-primary: 0 4px 14px 0 rgb(181 184 0 / 0.2);
    --shadow-accent: 0 4px 14px 0 rgb(196 163 90 / 0.2);

    /* ===== TRANSITIONS ===== */

    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* ===== Z-INDEX ===== */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;

    /* ===== COMPONENT TOKENS ===== */

    /* Buttons - Luxury (sharp, refined) */
    --btn-padding-x: 1.75rem;
    --btn-padding-y: 0.875rem;
    --btn-font-size: 0.9375rem;        /* 15px - slightly smaller, more elegant */
    --btn-font-weight: 500;            /* Medium weight - lighter, more elegant */
    --btn-radius: var(--radius-xs);    /* Sharp edges */
    --btn-font-family: var(--font-body);
    --btn-letter-spacing: 0.025em;     /* Subtle tracking */

    /* Button Primary (Citron Green - Signature) */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-text: var(--color-white);
    --btn-primary-hover-bg: var(--color-primary-dark);

    /* Button Secondary (Walnut Brown) */
    --btn-secondary-bg: var(--color-walnut);
    --btn-secondary-text: var(--color-white);
    --btn-secondary-hover-bg: var(--color-walnut-deep);

    /* Button Accent (Gold - for special highlights) */
    --btn-accent-bg: var(--color-accent-gold);
    --btn-accent-text: var(--color-walnut);
    --btn-accent-hover-bg: var(--color-secondary-dark);

    /* Inputs - Luxury */
    --input-padding-x: 1rem;
    --input-padding-y: 0.875rem;
    --input-font-size: 1rem;
    --input-radius: var(--radius-xs);  /* Sharp */
    --input-border-color: var(--color-gray-300);
    --input-focus-border-color: var(--color-primary);
    --input-bg: var(--color-white);

    /* Cards - Luxury (sharp, subtle shadow) */
    --card-padding: 2rem;              /* More generous padding */
    --card-radius: var(--radius-sm);   /* Sharper edges */
    --card-shadow: var(--shadow-sm);   /* Subtle shadow */
    --card-bg: var(--color-white);
    --card-border: 1px solid var(--color-gray-200);

    /* Navigation - Luxury */
    --nav-height: 72px;                /* Slightly thinner, more elegant */
    --nav-height-mobile: 60px;
    --nav-bg: var(--color-white);
    --nav-link-color: var(--color-walnut);
    --nav-link-hover: var(--color-primary);
    --nav-link-font: var(--font-body);

    /* ===== CONFIGURATOR TOKENS ===== */

    --config-step-inactive: var(--color-gray-300);
    --config-step-active: var(--color-primary);
    --config-step-complete: var(--color-accent-gold);  /* Gold for completion */

    --config-card-border: var(--color-gray-200);
    --config-card-selected-border: var(--color-primary);
    --config-card-selected-bg: rgba(181, 184, 0, 0.05);

    --config-price-bg: var(--color-bone);
    --config-price-text: var(--color-walnut);
    --config-price-highlight: var(--color-primary);
}

/* ===== BACKGROUND UTILITIES ===== */

.bg-bone { background-color: var(--color-bone); }
.bg-cream { background-color: var(--color-bone); }  /* Alias */
.bg-walnut { background-color: var(--color-walnut); }
.bg-walnut-deep { background-color: var(--color-walnut-deep); }
.bg-citron { background-color: var(--color-primary); }
.bg-gold { background-color: var(--color-accent-gold); }

/* ===== TEXT COLOR UTILITIES ===== */

.text-walnut { color: var(--color-walnut); }
.text-citron { color: var(--color-primary); }
.text-gold { color: var(--color-accent-gold); }
.text-bone { color: var(--color-bone); }
.text-cream { color: var(--color-bone); }  /* Alias */