/**
 * Rezonite Theme — Design Tokens
 * 60-30-10 Luxury Palette
 */

:root {
    /* Colors — 60-30-10 Rule */
    --color-cream: #FFFBF2;         /* Dominant (60%) */
    --color-espresso: #2D231E;      /* Secondary (30%) */
    --color-gold: #C9A84C;          /* Accent (10%) */
    
    --color-soft-line: #ECE7DF;     /* Border/Line */
    --color-metallic: #D4AF37;      /* Metallic Highlight */
    --color-cream-light: #FFFFFF;   /* Card Surface */
    --color-logo: #B97833;          /* Logo Color */

    /* Typography — Strict 3-Size System */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* 1. Small: UI Labels, Meta, Captions (14px) */
    --size-sm: clamp(0.75rem, 1vw + 0.5rem, 0.875rem);
    
    /* 2. Base: Body text, buttons, main UI (18px) */
    --size-base: clamp(1rem, 1.2vw + 0.6rem, 1.125rem);
    
    /* 3. Display: Primary Headlines and Hero (56px) */
    --size-display: clamp(2rem, 6vw + 1rem, 3.5rem);

    /* Layout & Effects */
    --max-width: 1240px;
    --radius-card: 10px;
    --radius-pill: 999px;
    --transition: cubic-bezier(0.22, 1, 0.36, 1);
    
    /* Z-index layers */
    --z-header: 1000;
    --z-overlay: 1100;

    /* Buttons (standard) */
    --btn-font: var(--font-sans);
    --btn-radius: var(--radius-pill);
    --btn-weight: 900;
    --btn-letter: 0.14em;
    --btn-pad-y: 12px;
    --btn-pad-x: 20px;

    /* Primary (espresso) */
    --btn-primary-bg: var(--color-espresso);
    --btn-primary-fg: var(--color-cream);
    --btn-primary-border: var(--color-espresso);
    --btn-primary-bg-hover: var(--color-gold);
    --btn-primary-fg-hover: var(--color-espresso);
    --btn-primary-border-hover: var(--color-gold);

    /* Secondary (outline) */
    --btn-secondary-bg: transparent;
    --btn-secondary-fg: var(--color-espresso);
    --btn-secondary-border: var(--color-soft-line);
    --btn-secondary-bg-hover: rgba(201, 168, 76, 0.14);
    --btn-secondary-border-hover: rgba(201, 168, 76, 0.45);

    /* Accent (gold) */
    --btn-accent-bg: var(--color-gold);
    --btn-accent-fg: var(--color-espresso);
    --btn-accent-border: var(--color-gold);
    --btn-accent-bg-hover: var(--color-metallic);
    --btn-accent-fg-hover: var(--color-espresso);
    --btn-accent-border-hover: var(--color-metallic);
}

/* Base resets for the theme aesthetic */
body {
    background-color: var(--color-cream);
    color: var(--color-espresso);
    font-family: var(--font-sans);
    font-size: var(--size-base);
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--color-espresso);
    line-height: 1.1;
    margin: 0 0 0.5em;
}

h1 { font-size: var(--size-display); }
h2, h3 { font-size: clamp(1.75rem, 4vw, 2.5rem); } /* Intermediate nudge for h2/h3 to look balanced, fallback to 3 logical tiers */
h4, h5, h6 { font-size: var(--size-base); font-weight: 700; }

small, .text-sm { font-size: var(--size-sm); }