/*
 * ============================================
 *  DESIGN TOKENS — PRIMITIVES
 * ============================================
 *  Raw design values. Components NEVER reference
 *  these directly — use semantics.css instead.
 * ============================================
 */

:root {
    /* ---- Blue ---- */
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #172554;

    /* ---- Gray ---- */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* ---- Green ---- */
    --green-50:  #f0fdf4;
    --green-100: #dcfce7;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;

    /* ---- Red ---- */
    --red-50:  #fef2f2;
    --red-100: #fee2e2;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;

    /* ---- Amber ---- */
    --amber-50:  #fffbeb;
    --amber-100: #fef3c7;
    --amber-500: #f59e0b;
    --amber-600: #d97706;

    /* ---- Base ---- */
    --white: #ffffff;
    --black: #000000;

    /* ---- Spacing (4px base) ---- */
    --space-0:  0;
    --space-px: 1px;
    --space-0-5: 0.125rem;  /* 2px */
    --space-1:  0.25rem;    /* 4px */
    --space-1-5: 0.375rem;  /* 6px */
    --space-2:  0.5rem;     /* 8px */
    --space-2-5: 0.625rem;  /* 10px */
    --space-3:  0.75rem;    /* 12px */
    --space-3-5: 0.875rem;  /* 14px */
    --space-4:  1rem;       /* 16px */
    --space-5:  1.25rem;    /* 20px */
    --space-6:  1.5rem;     /* 24px */
    --space-7:  1.75rem;    /* 28px */
    --space-8:  2rem;       /* 32px */
    --space-9:  2.25rem;    /* 36px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-14: 3.5rem;     /* 56px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */

    /* ---- Type Scale ---- */
    --text-xs:   0.75rem;     /* 12px */
    --text-sm:   0.875rem;    /* 14px */
    --text-base: 1rem;        /* 16px */
    --text-lg:   1.125rem;    /* 18px */
    --text-xl:   1.25rem;     /* 20px */
    --text-2xl:  1.5rem;      /* 24px */
    --text-3xl:  1.875rem;    /* 30px */
    --text-4xl:  2.25rem;     /* 36px */

    /* ---- Line Heights ---- */
    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* ---- Font Weights ---- */
    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* ---- Border Radius ---- */
    --radius-none: 0;
    --radius-sm:   0.125rem;  /* 2px */
    --radius-md:   0.375rem;  /* 6px */
    --radius-lg:   0.5rem;    /* 8px */
    --radius-xl:   0.75rem;   /* 12px */
    --radius-2xl:  1rem;      /* 16px */
    --radius-3xl:  1.5rem;    /* 24px */
    --radius-full: 9999px;

    /* ---- Box Shadows ---- */
    --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-none: none;

    /* ---- Transitions ---- */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   350ms ease;

    /* ---- Opacity ---- */
    --opacity-disabled: 0.5;
    --opacity-hover:    0.8;
}