/* =========================================
   CORE DESIGN TOKENS
   ========================================= */
:root {
    /* =========================================
       COLOR TOKENS
       ========================================= */
    --color-background-100: #ffffff;
    --color-background-200: #fafafa;

    --color-gray-100: #f2f2f2;
    --color-gray-200: #ebebeb;
    --color-gray-300: #e6e6e6;
    --color-gray-400: #c9c9c9;
    --color-gray-500: #a8a8a8;
    --color-gray-600: #8f8f8f;
    --color-gray-700: #7d7d7d;
    --color-gray-800: #666666;
    --color-gray-900: #171717;

    --color-blue: #0071e3;

    /* =========================================
       TYPOGRAPHY TOKENS
       ========================================= */
    --font-family-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-family-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Monaco, "Courier New", monospace;

    --font-size-label: 0.875rem;
    --font-size-paragraph: 0.875rem;
    --font-size-display: clamp(24px, calc(1.125rem + 1vw), 36px);

    --font-weight-paragraph: 400;
    --font-weight-label: 500;
    --font-weight-display: 400;

    --line-height-label: 125%;
    --line-height-paragraph: 175%;
    --line-height-display: 125%;

    /* =========================================
       SPACING TOKENS
       ========================================= */
    --space-2: 0.125rem;
    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-28: 1.75rem;
    --space-32: 2rem;
    --space-36: 2.25rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-56: 3.5rem;
    --space-64: 4rem;
    --space-80: 5rem;

    /* =========================================
       BORDER RADIUS TOKENS
       ========================================= */
    --radius-small: 0.75rem;
    --radius-medium: 1.25rem;
    --radius-large: 2.25rem;

    /* =========================================
       ELEVATION TOKENS
       ========================================= */
    --shadow-standard: 0 0 0 1px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.08);
}