/* css/tokens.css - Ban Chang Design System Tokens */

:root {
    /* Brand Colors (70/20/10 Rule)
       70% Dark (Espresso/Walnut) for premium sanctuary depth
       20% Muted Light (Ivory/Sand) for breathing room
       10% Accent (Gold/Terracotta) for highlights and interactions
    */
    --deep-espresso: #4A342B;
    --walnut-brown: #8A5A3C;
    --terracotta: #C46A4A;
    --warm-taupe: #BDAA95;
    --sand-beige: #E7D9C3;
    --ivory-cream: #F6F2EB;
    --soft-gold: #C9A96A;

    /* Theme Aliases */
    --color-bg-primary: var(--deep-espresso);
    --color-bg-secondary: var(--walnut-brown);
    --color-bg-dark: var(--deep-espresso);
    --color-bg-card-dark: rgba(44, 30, 22, 0.88);

    --color-text-primary: var(--ivory-cream);
    --color-text-secondary: var(--warm-taupe);
    --color-text-light: var(--ivory-cream);
    --color-text-muted: var(--warm-taupe);
    --color-accent: var(--soft-gold);
    --color-accent-hover: var(--terracotta);

    /* Typography Scale (Page 13) */
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Inter', sans-serif;

    /* Fluid sizes using clamp */
    --font-size-h1: clamp(48px, 8vw, 84px);
    --font-size-h2: clamp(32px, 5vw, 56px);
    --font-size-h3: clamp(28px, 3.5vw, 36px);
    --font-size-h4: clamp(22px, 2.5vw, 26px);
    --font-size-body: 19px;
    --font-size-body-small: 16px;
    --font-size-eyebrow: 13px;
    --font-size-nav: 14px;
    --font-size-button: 14px;

    /* Spacing & Layout (Page 20) */
    --gutter: 24px;
    --section-spacing-desktop: 120px;
    --section-spacing-mobile: 80px;
    --container-max: 1400px;
    --text-measure-ch: 70ch;

    /* Grid configuration */
    --grid-gap: 24px;

    /* Transitions (Spring-like easing, strictly avoiding transition-all) */
    --transition-speed: 0.4s;
    --ease-spring: cubic-bezier(0.2, 1, 0.3, 1);
    
    /* Elevation / Shadows */
    --shadow-tinted-dark: 0 20px 40px rgba(74, 52, 43, 0.15);
    --shadow-tinted-elevated: 0 30px 60px rgba(74, 52, 43, 0.25);
    --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}