/* ==========================================================================
   Project Management Platform — v2.0 design tokens
   --------------------------------------------------------------------------
   Layer 1 of 3 (see docs/design/2.0/docs-design-notes.html §1):

     1. tokens           assets/css/v2-tokens.css   <- this file
     2. base/components  assets/css/style.css
     3. page CSS         assets/css/pages/*.css

   This file contains ONLY the :root custom-property block. It has no
   selectors of its own, so it can never collide with the component layer
   and it can be loaded before style.css without ordering concerns.

   Source of truth: docs/design/2.0/v2-tokens.css §1. Do not hand-edit the
   values here without updating the mockup too, or the reference sheets in
   docs/design/2.0/components.html stop matching the running app.
   ========================================================================== */

:root {
    /* --- Brand / accent -------------------------------------------------- */
    --brand-50:  #eef4ff;
    --brand-100: #d9e5ff;
    --brand-200: #bcd2ff;
    --brand-300: #8eb3ff;
    --brand-400: #598bff;
    --brand-500: #3366ff;
    --brand-600: #1f4ae0;
    --brand-700: #1a3bb4;
    --brand-800: #1b358f;
    --brand-900: #1b3172;

    /* --- Neutrals -------------------------------------------------------- */
    --gray-0:   #ffffff;
    --gray-25:  #fbfcfe;
    --gray-50:  #f7f9fc;
    --gray-100: #eef1f6;
    --gray-200: #e2e7f0;
    --gray-300: #cbd3e1;
    --gray-400: #9aa5bb;
    --gray-500: #6b7691;
    --gray-600: #4d5771;
    --gray-700: #363f56;
    --gray-800: #232a3b;
    --gray-900: #151a28;
    --gray-950: #0c1018;

    /* --- Semantic -------------------------------------------------------- */
    --success-100: #d7f5e3;  --success-500: #16a34a;  --success-700: #12783a;
    --warning-100: #fdf0c9;  --warning-500: #b37400;  --warning-700: #7d5100;
    --danger-100:  #fbdcdc;  --danger-500:  #dc2626;  --danger-700:  #a01b1b;
    --info-100:    #d6ecfb;  --info-500:    #0284c7;  --info-700:    #075985;

    /* --- Status tokens (task/project states) ------------------------------ */
    --status-not-started-bg: var(--gray-200);    --status-not-started-fg: var(--gray-700);
    --status-in-progress-bg: var(--info-100);    --status-in-progress-fg: var(--info-700);
    --status-completed-bg:   var(--success-100); --status-completed-fg:   var(--success-700);
    --status-on-hold-bg:     var(--warning-100); --status-on-hold-fg:     var(--warning-700);
    --status-delayed-bg:     var(--danger-100);  --status-delayed-fg:     var(--danger-700);

    /* --- Typography ------------------------------------------------------ */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    --fs-xs:   0.75rem;   /* 12px */
    --fs-sm:   0.875rem;  /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-lg:   1.125rem;  /* 18px */
    --fs-xl:   1.375rem;  /* 22px */
    --fs-2xl:  1.75rem;   /* 28px */
    --fs-3xl:  2.25rem;   /* 36px */

    --lh-tight:  1.2;
    --lh-normal: 1.55;

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

    /* --- Spacing scale (4px base) ---------------------------------------- */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;

    /* --- Radii ----------------------------------------------------------- */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   20px;
    --r-full: 999px;

    /* --- Shadows --------------------------------------------------------- */
    --sh-xs: 0 1px 2px rgba(21, 26, 40, .06);
    --sh-sm: 0 1px 3px rgba(21, 26, 40, .08), 0 1px 2px rgba(21, 26, 40, .04);
    --sh-md: 0 4px 12px rgba(21, 26, 40, .08), 0 1px 3px rgba(21, 26, 40, .04);
    --sh-lg: 0 12px 32px rgba(21, 26, 40, .12), 0 2px 8px rgba(21, 26, 40, .06);
    --sh-xl: 0 24px 56px rgba(21, 26, 40, .16);

    /* --- Layout ---------------------------------------------------------- */
    --sidebar-w:          260px;
    --sidebar-w-collapsed: 76px;
    --topbar-h:           64px;
    --content-max-w:      1440px;

    /* --- Motion ---------------------------------------------------------- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 120ms;
    --dur:      200ms;
    --dur-slow: 320ms;

    --z-sticky: 100;
    --z-dropdown: 200;
    --z-overlay: 300;
    --z-toast: 400;
}