:root {
    /* Colors */
    --gray-950: #0b0b0b;
    --gray-900: #1c1c1c;
    --gray-800: #272727;
    --gray-700: #404040;
    --gray-600: #535353;
    --gray-500: #727272;
    --gray-400: #a3a3a3;
    --gray-300: #d3d3d3;
    --gray-200: #e6e6e6;
    --gray-100: #f5f5f5;
    --gray-50: #fafafa;

    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-500: #ef4444;
    --red-600: #dc2626;

    --red-500-rgb: 239, 68, 68;

    --green-50: #ecfdf5;
    --green-100: #d1faed;
    --green-200: #a7f3d2;
    --green-500: #10b985;
    --green-600: #059669;

    --blue-50: #eff5ff;
    --blue-100: #dbe6fe;
    --blue-200: #bfd3fe;
    --blue-500: #3b76f6;
    --blue-600: #2563eb;

    /* Semantic */
    --color-success-bg: var(--green-100);
    --color-success-border: var(--green-200);
    --color-success-text: var(--green-600);
    --color-success-bg-hover: var(--green-50);
    --color-success-border-hover: var(--green-100);
    --color-success-text-hover: var(--green-500);

    --color-warning-bg: var(--red-100);
    --color-warning-border: var(--red-200);
    --color-warning-text: var(--red-600);
    --color-warning-bg-hover: var(--red-50);
    --color-warning-border-hover: var(--red-100);
    --color-warning-text-hover: var(--red-500);

    --color-badge-bg: var(--blue-100);
    --color-badge-border: var(--blue-200);
    --color-badge-text: var(--blue-600);
    --color-badge-bg-hover: var(--blue-50);
    --color-badge-border-hover: var(--blue-100);
    --color-badge-text-hover: var(--blue-500);


    /* Typography */
    --font-size-5xl: 4rem;      /* 64px */
    --font-size-4xl: 3rem;      /* 48px */
    --font-size-3xl: 2rem;      /* 32px */
    --font-size-2xl: 1.5rem;    /* 24px */

    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-md: 1rem;       /* 16px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-2xs: 0.625rem;  /* 10px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Border */
    --radius-2xs: 0.25rem;       /* 4px */
    --radius-xs: 0.375rem;      /* 6px */
    --radius-sm: 0.5rem;        /* 8px */
    --radius-md: 0.75rem;       /* 12px */
    --radius-lg: 1rem;          /* 16px */
    --radius-xl: 1.5rem;        /* 24px */
    --radius-pill: 999rem;

    /* Spacing scale */
    --space-2xs: 0.25rem;       /* 4px */
    --space-xs: 0.375rem;       /* 6px */
    --space-sm: 0.5rem;         /* 8px */
    --space-md: 0.75rem;        /* 12px */
    --space-lg: 1rem;           /* 16px */
    --space-xl: 1.25rem;        /* 20px */
    --space-2xl: 1.5rem;        /* 24px */

    /* Motion */
    /* Duration */
    --duration-fast: 0.15s;     /* all var(--duration-fast); */
    --duration-normal: 0.2s;    /* opacity var(--duration-normal) var(--ease-standard); */
    --duration-slow: 0.3s;      /* transform var(--duration-slow) var(--ease-in-out); */

    /* Easing */
    --ease-standard: ease;      /* all var(--duration-normal) var(--ease-standard); */
    --ease-in: ease-in;         /* transform var(--duration-fast) var(--ease-in); */
    --ease-out: ease-out;       /* opacity var(--duration-fast) var(--ease-out); */
    --ease-in-out: ease-in-out; /* all var(--duration-slow) var(--ease-in-out); */

    /* Surface / overlay */
    --surface-overlay: rgba(15, 15, 15, 0.90);

    /* Subtle border */
    --border-subtle: rgba(255, 255, 255, 0.08);

    --focus-ring-subtle: 0 0 0 3px rgba(0, 0, 0, 0.05);

    /* Blur effect */
    --blur-lg: 20px;
}