/*
 * anccer-theme — tokens.css
 * Single source of truth for all design tokens.
 * Loaded first; every other stylesheet consumes these variables.
 *
 * Spacing / typography naming mirrors Tailwind so React developers
 * have a familiar vocabulary when building components.
 *
 * Breakpoints are listed as custom properties for reference only.
 * CSS custom properties cannot be interpolated inside @media rules;
 * copy the raw values into your queries.
 *
 *   sm  ≥ 480px   large phone / landscape
 *   md  ≥ 768px   tablet portrait
 *   lg  ≥ 1025px  tablet landscape / small laptop
 *   xl  ≥ 1200px  desktop
 *   2xl ≥ 1441px  wide desktop
 */

:root {

    /* ── Brand ──────────────────────────────────────── */
    --color-primary:           #1a3a5c;
    --color-primary-light:     #2d6a9f;
    --color-primary-dark:      #0f2238;
    --color-accent:            #e8703a;
    --color-accent-dark:       #c55a28;

    /* ── Surfaces ────────────────────────────────────── */
    --color-bg:                #f0f2f5;
    --color-surface:           #ffffff;
    --color-surface-raised:    #ffffff;
    --color-border:            #e4e6eb;
    --color-border-strong:     #c8ccd4;

    /* ── Text ────────────────────────────────────────── */
    --color-text:              #1c1e21;
    --color-text-muted:        #65676b;
    --color-text-subtle:       #90949c;
    --color-text-inverse:      #ffffff;

    /* ── State / semantic ────────────────────────────── */
    --color-danger:            #dc2626;
    --color-danger-bg:         #fef2f2;
    --color-danger-border:     #fca5a5;
    --color-success:           #16a34a;
    --color-success-bg:        #f0fdf4;
    --color-warning:           #d97706;
    --color-warning-bg:        #fffbeb;
    --color-info:              #2563eb;
    --color-info-bg:           #eff6ff;
    --color-active-bg:         #eef2ff;

    /* ── Spacing (1 unit = 0.25 rem / 4 px) ─────────── */
    --space-px:                1px;
    --space-0:                 0;
    --space-1:                 0.25rem;   /*  4px */
    --space-2:                 0.5rem;    /*  8px */
    --space-3:                 0.75rem;   /* 12px */
    --space-4:                 1rem;      /* 16px */
    --space-5:                 1.25rem;   /* 20px */
    --space-6:                 1.5rem;    /* 24px */
    --space-7:                 1.75rem;   /* 28px */
    --space-8:                 2rem;      /* 32px */
    --space-9:                 2.25rem;   /* 36px */
    --space-10:                2.5rem;    /* 40px */
    --space-12:                3rem;      /* 48px */
    --space-14:                3.5rem;    /* 56px */
    --space-16:                4rem;      /* 64px */
    --space-20:                5rem;      /* 80px */
    --space-24:                6rem;      /* 96px */

    /* ── Typography ──────────────────────────────────── */
    --font-sans:               -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:               ui-monospace, 'Fira Code', 'Cascadia Code', Consolas, monospace;

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

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

    --leading-none:            1;
    --leading-tight:           1.25;
    --leading-snug:            1.375;
    --leading-normal:          1.5;
    --leading-relaxed:         1.625;
    --leading-loose:           2;

    /* ── Border radius ───────────────────────────────── */
    --radius-sm:               4px;
    --radius:                  8px;
    --radius-lg:               12px;
    --radius-xl:               16px;
    --radius-full:             9999px;

    /* ── Shadows ─────────────────────────────────────── */
    --shadow-xs:               0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:               0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:                  0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-md:               0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg:               0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl:               0 16px 48px rgba(0, 0, 0, 0.14);

    /* ── Transitions ─────────────────────────────────── */
    --transition-fast:         150ms ease;
    --transition-base:         250ms ease;
    --transition-slow:         350ms ease;

    /* ── Z-index scale ──────────────────────────────────
     * Hierarchy (low → high):
     *   raised (1) → sticky (10) → header (100)
     *   → dropdown (200) → overlay/drawer (300/350)
     *   → modal (400) → toast (500) → tooltip (600)
     * Overlay and drawer are intentionally above the header
     * so that full-page drawers dim/cover everything.
     * ─────────────────────────────────────────────────── */
    --z-below:                 -1;
    --z-base:                   0;
    --z-raised:                 1;
    --z-sticky:                10;
    --z-header:               100;
    --z-dropdown:             200;
    --z-overlay:              300;
    --z-drawer:               350;
    --z-modal:                400;
    --z-toast:                500;
    --z-tooltip:              600;

    /* ── Layout ──────────────────────────────────────── */
    --nav-height:              70px;
    --sidebar-left-width:      200px;
    --sidebar-right-width:     220px;
    --container-max:           1280px;
    --container-max-wide:      1440px;
    --container-max-header:    1200px;

    /* ── Breakpoint reference (cannot use in @media) ─── */
    --bp-sm:                   480px;
    --bp-md:                   768px;
    --bp-lg:                   1025px;
    --bp-xl:                   1200px;
    --bp-2xl:                  1441px;
}


/* ── Dark mode token overrides ────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        /* Surfaces */
        --color-bg:                #18191a;
        --color-surface:           #242526;
        --color-surface-raised:    #2d2e2f;
        --color-border:            #3e4042;
        --color-border-strong:     #5a5c60;

        /* Text */
        --color-text:              #e4e6eb;
        --color-text-muted:        #b0b3b8;
        --color-text-subtle:       #8a8d91;

        /* Brand */
        --color-primary:           #4a9fd4;
        --color-primary-light:     #6bb5e8;
        --color-primary-dark:      #3585b5;

        /* State: active */
        --color-active-bg:         #1d3244;

        /* State: danger — dark backgrounds, lighter text */
        --color-danger:            #f87171;
        --color-danger-bg:         #2d1515;
        --color-danger-border:     #7f1d1d;

        /* State: success */
        --color-success:           #4ade80;
        --color-success-bg:        #14291b;

        /* State: warning */
        --color-warning:           #fbbf24;
        --color-warning-bg:        #2a1f07;

        /* State: info */
        --color-info:              #60a5fa;
        --color-info-bg:           #172040;

        /* Shadows — more opaque in dark contexts */
        --shadow-lg:               0 8px 24px rgba(0, 0, 0, 0.5);
        --shadow-xl:               0 16px 48px rgba(0, 0, 0, 0.6);
    }
}


/* ── Reduced motion — zero all transition durations ─ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast:         0ms;
        --transition-base:         0ms;
        --transition-slow:         0ms;
    }
}