/**
 * Aartful Theme — Design tokens and CSS custom properties.
 * Neutral + Warm palette with Space Grotesk as primary font.
 */

:root {
    /* ── Color Palette: Neutral + Warm ── */
    --aa-primary:         #8B6F47;     /* Warm brown — main brand */
    --aa-primary-light:   #A8896A;     /* Lighter variant */
    --aa-primary-dark:    #6B5535;     /* Darker variant */
    --aa-primary-rgb:     139, 111, 71;

    --aa-secondary:       #2C3E50;     /* Deep slate — headers, nav */
    --aa-secondary-light: #3D5569;
    --aa-secondary-dark:  #1A252F;

    --aa-accent:          #C67B5C;     /* Terracotta — CTAs, highlights */
    --aa-accent-light:    #D4967D;
    --aa-accent-dark:     #A8604A;

    --aa-warm-cream:      #FAF9F6;     /* Page background */
    --aa-warm-beige:      #F5F0EB;     /* Section alternating bg */
    --aa-warm-sand:       #E8E0D8;     /* Borders, dividers */
    --aa-warm-taupe:      #C4B9AD;     /* Muted text, placeholders */

    --aa-dark:            #1A1A1A;     /* Headings */
    --aa-body:            #4A4A4A;     /* Body text */
    --aa-muted:           #8A8A8A;     /* Secondary text */
    --aa-light:           #F8F7F4;     /* Light backgrounds */
    --aa-white:           #FFFFFF;
    --aa-black:           #0D0D0D;

    --aa-success:         #5B8C5A;
    --aa-warning:         #D4A843;
    --aa-error:           #C0504D;
    --aa-info:            #5B7B9A;

    /* ── Typography ── */
    --aa-font-primary:    'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --aa-font-heading:    'DM Serif Display', 'Playfair Display', Georgia, serif;
    --aa-font-body:       'Inter', 'Space Grotesk', -apple-system, sans-serif;
    --aa-font-mono:       'JetBrains Mono', 'Fira Code', monospace;

    --aa-fs-xs:           0.75rem;     /* 12px */
    --aa-fs-sm:           0.875rem;    /* 14px */
    --aa-fs-base:         1rem;        /* 16px */
    --aa-fs-md:           1.125rem;    /* 18px */
    --aa-fs-lg:           1.25rem;     /* 20px */
    --aa-fs-xl:           1.5rem;      /* 24px */
    --aa-fs-2xl:          2rem;        /* 32px */
    --aa-fs-3xl:          2.5rem;      /* 40px */
    --aa-fs-4xl:          3rem;        /* 48px */
    --aa-fs-5xl:          3.75rem;     /* 60px */
    --aa-fs-6xl:          4.5rem;      /* 72px */
    --aa-fs-hero:         clamp(2.5rem, 5vw + 1rem, 5rem);

    --aa-fw-light:        300;
    --aa-fw-regular:      400;
    --aa-fw-medium:       500;
    --aa-fw-semibold:     600;
    --aa-fw-bold:         700;

    --aa-lh-tight:        1.15;
    --aa-lh-snug:         1.3;
    --aa-lh-normal:       1.6;
    --aa-lh-relaxed:      1.8;

    --aa-ls-tight:        -0.03em;
    --aa-ls-normal:       0;
    --aa-ls-wide:         0.05em;
    --aa-ls-wider:        0.1em;

    /* ── Spacing ── */
    --aa-space-xs:        0.25rem;
    --aa-space-sm:        0.5rem;
    --aa-space-md:        1rem;
    --aa-space-lg:        1.5rem;
    --aa-space-xl:        2rem;
    --aa-space-2xl:       3rem;
    --aa-space-3xl:       4rem;
    --aa-space-4xl:       6rem;
    --aa-space-5xl:       8rem;
    --aa-space-section:   clamp(4rem, 8vw, 8rem);

    /* ── Layout ── */
    --aa-container:       1200px;
    --aa-container-sm:    800px;
    --aa-container-lg:    1400px;
    --aa-container-xl:    1600px;
    --aa-gutter:          1.5rem;
    --aa-sidebar-width:   300px;

    /* ── Borders & Radius ── */
    --aa-radius-sm:       4px;
    --aa-radius-md:       8px;
    --aa-radius-lg:       12px;
    --aa-radius-xl:       16px;
    --aa-radius-2xl:      24px;
    --aa-radius-full:     9999px;
    --aa-border:          1px solid var(--aa-warm-sand);
    --aa-border-light:    1px solid rgba(0, 0, 0, 0.06);

    /* ── Shadows ── */
    --aa-shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.04);
    --aa-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.06);
    --aa-shadow-md:       0 4px 16px rgba(0, 0, 0, 0.08);
    --aa-shadow-lg:       0 8px 32px rgba(0, 0, 0, 0.1);
    --aa-shadow-xl:       0 16px 48px rgba(0, 0, 0, 0.12);
    --aa-shadow-2xl:      0 24px 64px rgba(0, 0, 0, 0.16);
    --aa-shadow-warm:     0 4px 20px rgba(139, 111, 71, 0.12);
    --aa-shadow-hover:    0 8px 40px rgba(139, 111, 71, 0.18);

    /* ── Transitions ── */
    --aa-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --aa-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
    --aa-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --aa-ease-smooth:     cubic-bezier(0.25, 0.1, 0.25, 1);
    --aa-duration-fast:   150ms;
    --aa-duration-base:   300ms;
    --aa-duration-slow:   500ms;
    --aa-duration-slower: 800ms;

    /* ── Z-Index Scale ── */
    --aa-z-dropdown:      100;
    --aa-z-sticky:        200;
    --aa-z-fixed:         300;
    --aa-z-overlay:       400;
    --aa-z-modal:         500;
    --aa-z-toast:         600;
}

/* ── Dark scheme override ── */
@media (prefers-color-scheme: dark) {
    :root.aa-auto-dark {
        --aa-warm-cream:  #1A1A1A;
        --aa-warm-beige:  #222222;
        --aa-warm-sand:   #333333;
        --aa-dark:        #F5F0EB;
        --aa-body:        #C4B9AD;
        --aa-muted:       #8A8A8A;
        --aa-white:       #1A1A1A;
        --aa-black:       #FAFAFA;
    }
}