/**
 * CSS Custom Properties — Design Tokens
 *
 * All design decisions live here. Change a value once and it
 * propagates to every component that references the variable.
 *
 * Table of contents:
 *   1. Colors
 *   2. Typography
 *   3. Font sizes
 *   4. Spacing
 *   5. Borders & radii
 *   6. Shadows
 *   7. Transitions
 */

:root {

    /* =========================================================
       1. Colors
       ========================================================= */

    /* Brand */
    --color-primary:        #2563EB;
    --color-primary-hover:  #1D4ED8;
    --color-secondary:      #64748B;
    --color-accent:         #F59E0B;

    /* Backgrounds */
    --color-bg:             #FFFFFF;
    --color-surface:        #F8FAFC;

    /* Text */
    --color-text-dark:      #1E293B;
    --color-text-light:     #64748B;
    --color-text-muted:     #94A3B8;

    /* Border */
    --color-border:         #E2E8F0;

    /* Semantic / feedback */
    --color-success:        #10B981;
    --color-warning:        #F59E0B;
    --color-error:          #EF4444;
    --color-info:           #3B82F6;

    /* White / black helpers */
    --color-white:          #FFFFFF;
    --color-black:          #0F172A;


    /* =========================================================
       2. Typography — families & line heights
       ========================================================= */

    --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

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

    --line-height-tight:    1.2;
    --line-height-snug:     1.375;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.75;


    /* =========================================================
       3. Font sizes — modular scale
       ========================================================= */

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


    /* =========================================================
       4. Spacing — 8px base scale
       ========================================================= */

    --spacing-xs:   0.25rem;   /*  4px */
    --spacing-sm:   0.5rem;    /*  8px */
    --spacing-md:   1rem;      /* 16px */
    --spacing-lg:   1.5rem;    /* 24px */
    --spacing-xl:   2rem;      /* 32px */
    --spacing-2xl:  3rem;      /* 48px */
    --spacing-3xl:  4rem;      /* 64px */
    --spacing-4xl:  6rem;      /* 96px */


    /* =========================================================
       5. Borders & radii
       ========================================================= */

    --border-width:     1px;
    --border-style:     solid;

    --radius-sm:        0.25rem;   /*  4px */
    --radius-md:        0.375rem;  /*  6px */
    --radius-lg:        0.5rem;    /*  8px */
    --radius-xl:        0.75rem;   /* 12px */
    --radius-full:      9999px;


    /* =========================================================
       6. Shadows
       ========================================================= */

    --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
    --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);


    /* =========================================================
       7. Transitions
       ========================================================= */

    --transition-fast:    150ms ease;
    --transition-normal:  250ms ease;
    --transition-slow:    400ms ease;
}