/* vars.css - Design Tokens */

:root {
    /* Background Levels (Light Mode) */
    --background-level-1: #dee2e6; /* Deepest */
    --background-level-2: #e9ecef;
    --background-level-3: #f8f9fa; /* Base */
    --background-level-4: #ffffff;
    --background-level-5: #ffffff; /* Surface */

    /* Spacing Scale (Used for Margins, Padding, and Corners) */
    --spacing-level-1: 0.25rem; /* 4px */
    --spacing-level-2: 0.5rem;  /* 8px */
    --spacing-level-3: 1rem;    /* 16px */
    --spacing-level-4: 1.5rem;  /* 24px */
    --spacing-level-5: 2rem;    /* 32px */

    /* Text Scale (8, 12, 16, 24, 32px) */
    --text-level-1: 0.5rem;   /* 8px */
    --text-level-2: 0.75rem;  /* 12px */
    --text-level-3: 1rem;     /* 16px - Base */
    --text-level-4: 1.5rem;   /* 24px */
    --text-level-5: 2rem;     /* 32px */

    /* Border Radius Scale (Decoupled from Spacing) */
    --border-radius-level-1: 0.25rem; /* 4px */
    --border-radius-level-2: 0.5rem;  /* 8px */
    --border-radius-level-3: 0.75rem; /* 12px */

    /* Width Levels (Real Space Capacity) */
    --width-level-1: 200px;  /* Watch */
    --width-level-2: 320px;  /* Mobile Vertical */
    --width-level-3: 480px;  /* Mobile Horizontal / Tablet Vertical */
    --width-level-4: 768px;  /* Tablet Horizontal / Laptop */
    --width-level-5: 1440px; /* Big Screens (Desktop/4K) */

    /* Text Colors */
    --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Background Levels (Dark Mode) */
        --background-level-1: #000000; /* Deepest */
        --background-level-2: #0a0a0a;
        --background-level-3: #121212; /* Base */
        --background-level-4: #1e1e1e;
        --background-level-5: #2c2c2c; /* Surface */

        /* Text Colors */
        --text-color: #ffffff;
    }
}