/* =============================================================
   Future Plans — CSS Custom Properties (Design Tokens)
   ============================================================= */

:root {
    /* ── Color Palette: Indigo/Slate ── */
    --color-primary:          hsl(239, 84%, 67%);
    --color-primary-hover:    hsl(239, 84%, 57%);
    --color-primary-light:    hsl(226, 100%, 94%);
    --color-primary-muted:    hsla(239, 84%, 67%, 0.12);
    --color-primary-rgb:      99, 102, 241;

    --color-success:          hsl(160, 84%, 39%);
    --color-success-light:    hsl(160, 84%, 93%);
    --color-warning:          hsl(38, 92%, 50%);
    --color-warning-light:    hsl(38, 100%, 92%);
    --color-danger:           hsl(0, 84%, 60%);
    --color-danger-light:     hsl(0, 86%, 94%);
    --color-critical:         hsl(0, 72%, 51%);

    /* ── Neutrals ── */
    --color-bg:               hsl(210, 40%, 98%);
    --color-surface:          hsl(0, 0%, 100%);
    --color-surface-hover:    hsl(210, 40%, 96%);
    --color-border:           hsl(214, 32%, 91%);
    --color-border-light:     hsl(214, 32%, 95%);
    --color-text:             hsl(222, 47%, 11%);
    --color-text-secondary:   hsl(215, 16%, 47%);
    --color-text-muted:       hsl(215, 20%, 65%);
    --color-text-inverse:     hsl(0, 0%, 100%);

    /* ── Semantic Surface ── */
    --color-sidebar-bg:       hsl(224, 30%, 14%);
    --color-sidebar-text:     hsl(214, 32%, 80%);
    --color-sidebar-active:   hsla(239, 84%, 67%, 0.15);
    --color-sidebar-hover:    hsla(0, 0%, 100%, 0.06);
    --color-topbar-bg:        hsl(0, 0%, 100%);
    --color-overlay:          hsla(222, 47%, 11%, 0.5);

    /* ── Status Colors ── */
    --color-status-waiting:   hsl(38, 92%, 50%);
    --color-status-done:      hsl(160, 84%, 39%);
    --color-status-cancelled: hsl(215, 16%, 47%);

    /* ── Priority Colors ── */
    --color-priority-low:     hsl(215, 20%, 65%);
    --color-priority-medium:  hsl(239, 84%, 67%);
    --color-priority-high:    hsl(38, 92%, 50%);
    --color-priority-critical:hsl(0, 72%, 51%);

    /* ── Spacing Scale (4px base) ── */
    --space-2xs:  0.125rem;   /* 2px */
    --space-xs:   0.25rem;    /* 4px */
    --space-sm:   0.5rem;     /* 8px */
    --space-md:   1rem;       /* 16px */
    --space-lg:   1.5rem;     /* 24px */
    --space-xl:   2rem;       /* 32px */
    --space-2xl:  3rem;       /* 48px */
    --space-3xl:  4rem;       /* 64px */

    /* ── Typography ── */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:    0.75rem;    /* 12px */
    --text-sm:    0.8125rem;  /* 13px */
    --text-base:  0.875rem;   /* 14px */
    --text-md:    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 */

    --leading-tight:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed:1.625;

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

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

    /* ── Shadows ── */
    --shadow-xs:  0 1px 2px  hsla(222, 47%, 11%, 0.04);
    --shadow-sm:  0 1px 3px  hsla(222, 47%, 11%, 0.06),
                  0 1px 2px  hsla(222, 47%, 11%, 0.04);
    --shadow-md:  0 4px 6px  hsla(222, 47%, 11%, 0.06),
                  0 2px 4px  hsla(222, 47%, 11%, 0.04);
    --shadow-lg:  0 10px 15px hsla(222, 47%, 11%, 0.08),
                  0 4px 6px  hsla(222, 47%, 11%, 0.04);
    --shadow-xl:  0 20px 25px hsla(222, 47%, 11%, 0.1),
                  0 8px 10px hsla(222, 47%, 11%, 0.04);
    --shadow-focus:0 0 0 3px hsla(239, 84%, 67%, 0.3);

    /* ── Layout ── */
    --sidebar-width:     260px;
    --sidebar-collapsed: 72px;
    --topbar-height:     64px;
    --content-max-width: 1400px;

    /* ── Transitions ── */
    --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:  150ms;
    --duration-base:  250ms;
    --duration-slow:  350ms;
    --duration-slower:500ms;

    /* ── Z-Index Scale ── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
}