:root {
    /* 1. Neutral Palette (Warm Grays) */
    --gray-0:   #0f0e0e; /* Near Black Warm */
    --gray-10:  #1c1a1a; /* Essential Text */
    --gray-40:  #4a4545; /* Paragraphs */
    --gray-60:  #6b6565; /* Muted Text */
    --gray-80:  #9e9797; /* Dimmed Text */
    --gray-90:  #d6cfcf; /* Strong Borders */
    --gray-94:  #ede8e8; /* Silent Borders */
    --gray-97:  #fcfafa; /* Surface Alt */
    --gray-99:  #fffdfd; /* Main Background */
    --gray-100: #ffffff; /* Surface */

    /* 2. Modular Typographic Scale (Major Third - 1.250) */
    --step--2: 0.64rem;
    --step--1: 0.8rem;
    --step-0:  1rem;    /* Base (16px) */
    --step-1:  1.25rem;
    --step-2:  1.563rem;
    --step-3:  1.953rem;
    --step-4:  2.441rem;
    --step-5:  3.052rem;
    --step-6:  3.815rem;

    /* 3. Spacing Scale (Base 8px / 0.5rem) */
    --space-base: 0.5rem;
    --space-1: calc(var(--space-base) * 1);  /* 8px */
    --space-2: calc(var(--space-base) * 2);  /* 16px */
    --space-3: calc(var(--space-base) * 3);  /* 24px */
    --space-4: calc(var(--space-base) * 4);  /* 32px */
    --space-6: calc(var(--space-base) * 6);  /* 48px */
    --space-8: calc(var(--space-base) * 8);  /* 64px */
    --space-12: calc(var(--space-base) * 12); /* 96px */
    --space-16: calc(var(--space-base) * 16); /* 128px */
    --space-24: calc(var(--space-base) * 24); /* 192px */
    --space-32: calc(var(--space-base) * 32); /* 256px */

    /* 4. Semantic Aliases (Light Mode Default) */
    --ui-bg: var(--gray-99);
    --ui-text: var(--gray-10);
    --ui-text-muted: var(--gray-60);
    --ui-text-dim: var(--gray-80);
    --ui-text-para: var(--gray-40);
    
    --ui-border-silent: var(--gray-94);
    --ui-border-strong: var(--gray-90);
    
    --ui-surface: var(--gray-100);
    --ui-surface-alt: var(--gray-97);
    
    --ui-font-sans: 'Inter', -apple-system, sans-serif;
    --ui-font-serif: 'Playfair Display', Georgia, serif;
    --ui-font-mono: 'JetBrains Mono', monospace;

    --ui-radius: 2px;
    --ui-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* 5. Noisy Example Tokens (Default Light) */
    --noisy-bg: #f5f5f5;
    --noisy-text: #333;
    --noisy-text-muted: #666;
    --noisy-text-dim: #999;
    --noisy-border: #ccc;
    --noisy-card: #ffffff;
    --noisy-shadow: 0 10px 25px rgba(0,0,0,0.1);
    --noisy-shadow-small: 0 2px 5px rgba(0,0,0,0.05);
    --noisy-error-bg: #fff5f5;
    --noisy-error-text: #333;
}

/* Theme Support: Automatic (System) and Manual (Toggle) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ui-bg: var(--gray-0);
        --ui-text: var(--gray-99);
        --ui-text-muted: var(--gray-80);
        --ui-text-dim: var(--gray-80);
        --ui-text-para: var(--gray-90);
        --ui-border-silent: var(--gray-10);
        --ui-border-strong: var(--gray-40);
        --ui-surface: var(--gray-10);
        --ui-surface-alt: #121111; /* Slightly lighter than gray-0 */

        /* Noisy Dark Overrides */
        --noisy-bg: #121212;
        --noisy-text: #eee;
        --noisy-text-muted: #aaa;
        --noisy-text-dim: #666;
        --noisy-border: #333;
        --noisy-card: #1e1e1e;
        --noisy-shadow: 0 10px 25px rgba(0,0,0,0.5);
        --noisy-shadow-small: 0 2px 10px rgba(0,0,0,0.5);
        --noisy-error-bg: #2a1010;
        --noisy-error-text: #ffcccc;
    }
}

[data-theme="dark"] {
    --ui-bg: var(--gray-0);
    --ui-text: var(--gray-99);
    --ui-text-muted: var(--gray-80);
    --ui-text-dim: var(--gray-80);
    --ui-text-para: var(--gray-90);
    --ui-border-silent: var(--gray-10);
    --ui-border-strong: var(--gray-40);
    --ui-surface: var(--gray-10);
    --ui-surface-alt: #121111;

    /* Noisy Dark Overrides */
    --noisy-bg: #121212;
    --noisy-text: #eee;
    --noisy-text-muted: #aaa;
    --noisy-text-dim: #666;
    --noisy-border: #333;
    --noisy-card: #1e1e1e;
    --noisy-shadow: 0 10px 25px rgba(0,0,0,0.5);
    --noisy-shadow-small: 0 2px 10px rgba(0,0,0,0.5);
    --noisy-error-bg: #2a1010;
    --noisy-error-text: #ffcccc;
}

[data-theme="light"] {
    --ui-bg: var(--gray-99);
    --ui-text: var(--gray-10);
    --ui-text-muted: var(--gray-60);
    --ui-text-dim: var(--gray-80);
    --ui-text-para: var(--gray-40);
    --ui-border-silent: var(--gray-95);
    --ui-border-strong: var(--gray-90);
    --ui-surface: var(--gray-99);
    --ui-surface-alt: var(--gray-94); /* Distinct from bg */

    /* Noisy Light Overrides */
    --noisy-bg: #f5f5f5;
    --noisy-text: #333;
    --noisy-text-muted: #666;
    --noisy-text-dim: #999;
    --noisy-border: #ccc;
    --noisy-card: #ffffff;
    --noisy-shadow: 0 10px 25px rgba(0,0,0,0.1);
    --noisy-shadow-small: 0 2px 5px rgba(0,0,0,0.05);
    --noisy-error-bg: #fff5f5;
    --noisy-error-text: #333;
}