/* ======================================================
   TYPOGRAPHY TOKENS
====================================================== */
:root {
    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-md: 1.125rem; /* 18px */
    --text-lg: 1.25rem; /* 20px */
    --text-xl: 1.5rem; /* 24px */
    --text-2xl: 1.875rem; /* 30px */
    --text-3xl: 2.25rem; /* 36px */
    --text-4xl: 3rem; /* 48px */

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
}

/* ======================================================
   COLOR TOKENS — LIGHT (default)
====================================================== */
:root,
html[data-theme="light"] {
    /* PRIMARY */
    --primary-50: #f3f7ff;
    --primary-100: #e6efff;
    --primary-200: #cfe0ff;
    --primary-400: #5b84ff;
    --primary-500: #3366ff;
    --primary-600: #274fd6;
    --primary-700: #1c3aa8;
    /* SECONDARY */
    --secondary-50: #f6fbf8;
    --secondary-200: #dff6ef;
    --secondary-500: #00a896;
    --secondary-700: #007a67;
    /* ACCENT */
    --accent-50: #fff7f2;
    --accent-300: #ffd9c6;
    --accent-500: #ff7a59;
    --accent-700: #16a085;
    /* SURFACES */
    --bg: #f7f9fc;
    --bg-rgb: 247, 249, 252;
    --surface: #ffffff;
    --fg: #374151;
    --muted: #6b7280;
    --border: rgba(11, 23, 38, 0.08);
    --svg-color: #6b7280;
    /* FEEDBACK */
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #ef4444;
    /* FOCUS */
    --ring: rgba(51, 102, 255, 0.14);
    /* LAYOUT */
    --container-max: 1180px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    /* SHADOWS & GRADIENTS */
    --shadow-sm: 0 6px 18px rgba(11, 23, 38, 0.06);
    --shadow-md: 0 18px 40px rgba(11, 23, 38, 0.08);
    --grad-primary: linear-gradient(90deg, var(--primary-400), var(--primary-500));
    /* MOTION */
    --motion-slow: 180ms;
}

/* ======================================================
   COLOR TOKENS — DARK
====================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-50: #07112a;
        --primary-100: #0b2350;
        --primary-200: #0f3a84;
        --primary-400: #5b84ff;
        --primary-500: #7fa0ff;
        --primary-600: #6a8ee8;
        --primary-700: #5673c2;
        --secondary-50: #07221a;
        --secondary-200: #024d42;
        --secondary-500: #00c4a1;
        --accent-50: #2f1209;
        --accent-300: #7e442b;
        --accent-500: #ff9a78;
        --bg: #071023;
        --bg-rgb: 7, 16, 35;
        --surface: #081428;
        --fg: #eaf2ff;
        --muted: #9aa6ba;
        --border: rgba(234, 242, 255, 0.06);
        --svg-color: #9aa6ba;
        --success: #1ed08a;
        --warning: #f6b84b;
        --danger: #ff7b7b;
        --ring: rgba(127, 160, 255, 0.14);
        --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.6);
        --shadow-md: 0 18px 46px rgba(0, 0, 0, 0.7);
        --grad-primary: linear-gradient(90deg, rgba(95, 120, 255, 0.16), rgba(127, 160, 255, 0.22));
    }
}

html[data-theme="dark"] {
    --primary-50: #07112a;
    --primary-100: #0b2350;
    --primary-200: #0f3a84;
    --primary-400: #5b84ff;
    --primary-500: #7fa0ff;
    --primary-600: #6a8ee8;
    --primary-700: #5673c2;
    --secondary-50: #07221a;
    --secondary-200: #024d42;
    --secondary-500: #00c4a1;
    --accent-50: #2f1209;
    --accent-300: #7e442b;
    --accent-500: #ff9a78;
    --bg: #071023;
    --bg-rgb: 7, 16, 35;
    --surface: #081428;
    --fg: #eaf2ff;
    --muted: #9aa6ba;
    --border: rgba(234, 242, 255, 0.06);
    --svg-color: #9aa6ba;
    --success: #1ed08a;
    --warning: #f6b84b;
    --danger: #ff7b7b;
    --ring: rgba(127, 160, 255, 0.14);
    --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 18px 46px rgba(0, 0, 0, 0.7);
    --grad-primary: linear-gradient(90deg, rgba(95, 120, 255, 0.16), rgba(127, 160, 255, 0.22));
}