/**
 * ChaCha Home Design System
 *
 * Shared visual tokens used by theme components.
 * Keep component-specific rules in their own CSS files.
 */

:root {
    /* Brand and text */
    --chacha-espresso: #201A17;
    --chacha-onyx: var(--chacha-espresso);

    --chacha-text-strongest: #201A17;
    --chacha-text-strong: #3B322D;
    --chacha-text-medium: #6A5F58;
    --chacha-text-muted: #6A5F58;

    /* Accent */
    --chacha-brass: #B08D57;
    --chacha-brass-dark: #8F6F3F;
    --chacha-brass-light: #D0B07B;

    --chacha-accent: #B08D57;
    --chacha-accent-dark: #8F6F3F;

    /* Surfaces and borders */
    --chacha-background: #F6F1EA;
    --chacha-alabaster: #F8F4EE;

    --chacha-surface: #EDE6DD;
    --chacha-surface-soft: #FAF7F2;

    --chacha-border: #D7CEC4;
    --chacha-border-soft: #DED5CB;
    --chacha-border-subtle: #E1D8CD;
    --chacha-subtle: #D7CEC4;

    --chacha-white: #FFFDFC;
    --chacha-ivory: var(--chacha-white);
    --chacha-background-light: var(--chacha-white);
    --chacha-bg: var(--chacha-white);
    --chacha-bg-soft: #FBF8F4;

    /* Semantic status */
    --chacha-success: #2F6B4F;
    --chacha-alert: #A63D40;
    --chacha-warning: #B7791F;

    /* Typography */
    --chacha-font-body: "Inter", sans-serif;
    --chacha-font-heading: "Cormorant Garamond", serif;

    /* Eyebrow typography */
    --chacha-eyebrow-text-transform: uppercase;

    --chacha-eyebrow-compact-size: 8px;
    --chacha-eyebrow-compact-weight: 700;
    --chacha-eyebrow-compact-line-height: 1;
    --chacha-eyebrow-compact-letter-spacing: 0.15em;

    --chacha-eyebrow-promo-size: 9px;
    --chacha-eyebrow-promo-weight: 700;
    --chacha-eyebrow-promo-line-height: 1.2;
    --chacha-eyebrow-promo-letter-spacing: 0.18em;

    --chacha-eyebrow-section-size: 10px;
    --chacha-eyebrow-section-weight: 600;
    --chacha-eyebrow-section-line-height: 1.4;
    --chacha-eyebrow-section-letter-spacing: 0.18em;

    /* Button typography */
    --chacha-button-text-transform: uppercase;

    --chacha-button-compact-size: 9px;
    --chacha-button-compact-weight: 700;
    --chacha-button-compact-line-height: 1;
    --chacha-button-compact-letter-spacing: 0.10em;

    --chacha-button-promo-size: 9px;
    --chacha-button-promo-weight: 700;
    --chacha-button-promo-line-height: 1;
    --chacha-button-promo-letter-spacing: 0.09em;

    --chacha-button-standard-size: 10px;
    --chacha-button-standard-weight: 600;
    --chacha-button-standard-line-height: 1;
    --chacha-button-standard-letter-spacing: 0.08em;

    /*
     * Spacing scale
     *
     * Fine scale: 2px increments through 20px.
     * Layout scale: broader increments above 20px.
     * Existing off-scale component values remain
     * untouched until component-level consolidation.
     */
    --chacha-space-2: 2px;
    --chacha-space-4: 4px;
    --chacha-space-6: 6px;
    --chacha-space-8: 8px;
    --chacha-space-10: 10px;
    --chacha-space-12: 12px;
    --chacha-space-14: 14px;
    --chacha-space-16: 16px;
    --chacha-space-18: 18px;
    --chacha-space-20: 20px;

    --chacha-space-24: 24px;
    --chacha-space-28: 28px;
    --chacha-space-32: 32px;
    --chacha-space-36: 36px;
    --chacha-space-40: 40px;
    --chacha-space-48: 48px;
    --chacha-space-56: 56px;
    --chacha-space-64: 64px;
    --chacha-space-72: 72px;
    --chacha-space-80: 80px;

    /*
     * Border radius
     *
     * Primitive radii reflect established ChaCha UI geometry.
     * Pill and circle are semantic shape tokens.
     * Component-specific legacy values remain untouched.
     */
    --chacha-radius-none: 0;

    --chacha-radius-2: 2px;
    --chacha-radius-4: 4px;
    --chacha-radius-5: 5px;
    --chacha-radius-6: 6px;
    --chacha-radius-8: 8px;

    --chacha-radius-pill: 999px;
    --chacha-radius-circle: 50%;





    /*
     * Editorial / service page hierarchy.
     * HUB = top-level discovery pages.
     * PAGE = detail, service and long-form document pages.
     */
    --chacha-page-shell-max: 1180px;
    --chacha-hub-shell-max: 1400px;

    --chacha-page-hero-padding-top: 52px;
    --chacha-page-hero-padding-bottom: 48px;
    --chacha-page-hero-title-size: clamp(44px, 4.2vw, 58px);
    --chacha-page-hero-title-line-height: 1.02;
    --chacha-page-hero-lead-size: 15px;
    --chacha-page-hero-lead-line-height: 1.75;
    --chacha-page-section-title-size: 34px;
    --chacha-page-section-title-line-height: 1.12;

    --chacha-hub-hero-padding-top: 64px;
    --chacha-hub-hero-padding-bottom: 58px;
    --chacha-hub-hero-title-size: clamp(44px, 5vw, 72px);
    --chacha-hub-hero-title-line-height: 0.98;

    --chacha-page-mobile-hero-padding-top: 30px;
    --chacha-page-mobile-hero-padding-bottom: 32px;
    --chacha-page-mobile-hero-title-size: 40px;
    --chacha-page-mobile-hero-lead-size: 13.5px;
    --chacha-page-mobile-hero-lead-line-height: 1.7;
    --chacha-page-mobile-section-title-size: 29px;

    --chacha-hub-mobile-hero-padding-top: 38px;
    --chacha-hub-mobile-hero-padding-bottom: 36px;
    --chacha-hub-mobile-hero-title-size: 46px;

    /* Layout */
    --chacha-container-max: 1400px;

    /* Layering */
    --chacha-z-header: 100;
    --chacha-z-dropdown: 500;
}