/* ============================================
   Timexora — Design Tokens
   Single source of truth for color, spacing, type, radius, shadow.
   Every other stylesheet should reference these instead of raw values.
   ============================================ */

:root {
    /* Brand */
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-light: #eef2ff;

    /* Ink (text) */
    --color-ink: #0f172a;
    --color-ink-muted: #64748b;
    --color-ink-faint: #94a3b8;

    /* Surfaces */
    --color-surface: #ffffff;
    --color-surface-alt: #f8fafc;
    --color-border: #e2e8f0;

    /* Feedback */
    --color-success: #16a34a;
    --color-success-light: #f0fdf4;
    --color-danger: #dc2626;
    --color-danger-light: #fef2f2;

    /* Type */
    --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Spacing scale (4px base grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);

    /* Layout */
    --container-width: 1120px;
    --container-narrow: 640px;
}