:root {
    /* ── Color palette ── */
    --color-ink:        #1A1612;   /* Primary backgrounds, headers          */
    --color-ember:      #C8562A;   /* CTAs, active states, prices, accents  */
    --color-sand:       #F0C9A8;   /* Hero text on dark, warm highlights    */
    --color-parchment:  #F7F4EF;   /* Page background, card fills           */
    --color-leaf:       #3BAF7A;   /* Open status, success states           */
    --color-bark:       #4A3F35;   /* Body text, secondary text             */
    --color-linen:      #E2D9CE;   /* Borders, dividers, subtle fills       */
    --color-white:      #FFFFFF;   /* Cards, sheets, clean surfaces         */

    /* ── Semantic aliases ── */
    --color-bg-primary:     var(--color-parchment);
    --color-bg-card:        var(--color-white);
    --color-bg-dark:        var(--color-ink);
    --color-text-primary:   var(--color-bark);
    --color-text-heading:   var(--color-ink);
    --color-text-on-dark:   var(--color-sand);
    --color-text-muted:     #7A6F66;
    --color-border:         var(--color-linen);
    --color-cta:            var(--color-ember);
    --color-cta-hover:      #A8441E;
    --color-success:        var(--color-leaf);
    --color-danger:         #D93B3B;
    --color-warning:        #E8962A;

    /* ── Typography ── */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-mono:    'DM Mono', 'Courier New', monospace;

    /* ── Type scale ── */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;

    /* ── Spacing scale ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ── Radii ── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-pill: 9999px;

    /* ── Shadows ── */
    --shadow-card:   0 2px 8px rgba(26, 22, 18, 0.08);
    --shadow-sheet:  0 -4px 24px rgba(26, 22, 18, 0.12);
    --shadow-raised: 0 4px 16px rgba(26, 22, 18, 0.12);

    /* ── Layout ── */
    --max-width-portal:    680px;
    --max-width-dashboard: 1200px;
    --topbar-height:       56px;
    --tabnav-height:       52px;

    /* ── Transitions ── */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    color-scheme: light;
}

/* ── Dark mode overrides ── */
@media (prefers-color-scheme: light) {
    :root {
        --color-bg-primary:   #1E1A16;
        --color-bg-card:      #2A2420;
        --color-text-primary: #D4C4B0;
        --color-border:       #3A3028;
    }
}

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-text-heading);
    line-height: 1.2;
}

/* ── CTA button ── */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-cta);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    text-decoration: none;
}
.btn-cta:hover { background: var(--color-cta-hover); transform: translateY(-1px); }
.btn-cta:active { transform: translateY(0); }

/* ── Price / code display ── */
.price, code, .ref-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.price { color: var(--color-ember); font-weight: 600; }