/*
 * Design tokens — the one scale every surface of the application is built on.
 *
 * Nothing here draws anything: this file only declares custom properties, so
 * it is safe on every layout, print pages included. Every other stylesheet
 * reads these instead of writing a raw colour, gap, radius or shadow of its
 * own. Two components that should sit 8px apart then sit 8px apart on every
 * page, because both ask for --space-2 rather than each remembering "8px".
 *
 * Picking a token:
 *   - Gaps, padding, margins    --space-*      (4px grid, plus 10px for the page rhythm; no 5px)
 *   - Text                      --text-*       (13px is body; 11px is the floor)
 *   - Colour                    --color-*      (semantic — never a --gray-* in a component)
 *   - Corners                   --radius-*     (inputs 4 · buttons 6 · cards 8 · modals 12)
 *   - Depth                     --shadow-*     (a 1px border first; a shadow only lifts)
 *
 * Colour is always asked for by role (--color-border, --color-text-muted), not
 * by shade. A later dark theme then overrides the roles in one block and
 * leaves every component alone.
 *
 * The ⌘K palette (global-search.css) is the reference surface these values
 * were taken from. See docs/ui-design-tokens.md.
 */

:root {
    /* Spacing — 4px grid. Bootstrap's spacers 1–4 (4/8/16/24px) sit on it too. */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;

    /* The page rhythm: the space between two cards, side by side or stacked,
       and between the page header and the first card. Ask for this, not a
       --space-* step, wherever cards sit next to one another. */
    --layout-gap: var(--space-2-5);

    /* Type */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --text-2xs: 0.6875rem;  /* 11px — badges, overlines, kbd */
    --text-xs: 0.75rem;     /* 12px — table heads, hints, meta */
    --text-sm: 0.8125rem;   /* 13px — body, inputs, table cells */
    --text-md: 0.875rem;    /* 14px — card titles, nav */
    --text-lg: 1rem;        /* 16px — modal titles */
    --text-xl: 1.125rem;    /* 18px — page titles */
    --text-2xl: 1.5rem;     /* 24px — dashboard figures */
    --text-3xl: 1.75rem;    /* 28px — app-tile icons */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --leading-tight: 1.25;
    --leading: 1.5;
    --tracking-overline: 0.06em;

    /* Neutrals — Tailwind slate. Components never use these directly. */
    --gray-0: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Accent — indigo, the palette's. */
    --indigo-50: #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-200: #c7d2fe;
    --indigo-300: #a5b4fc;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;

    /* Semantic colour — ask for these. */
    --color-bg: #eef1f5;             /* a step under slate 100: a white card reads off it */
    --color-surface: var(--gray-0);
    --color-surface-muted: var(--gray-50);
    --color-surface-hover: var(--gray-100);
    --color-surface-translucent: rgb(255 255 255 / 0.92);
    --color-border: var(--gray-200);
    --color-border-strong: var(--gray-300);
    --color-border-input: #b9c3d0;   /* between slate 300 and 400: a field reads as a box */
    --color-border-card: #d7d7d7;    /* a neutral grey edge: the slate hairline read as faded on the grey page */

    --color-text: var(--gray-900);
    --color-text-secondary: var(--gray-600);
    --color-text-muted: var(--gray-500);
    --color-text-subtle: var(--gray-400);
    --color-text-inverse: var(--gray-0);

    --color-accent: var(--indigo-600);
    --color-accent-hover: var(--indigo-700);
    --color-accent-soft: var(--indigo-50);
    --color-accent-border: var(--indigo-200);
    --color-accent-text: var(--indigo-700);

    --color-success: #16a34a;
    --color-success-hover: #15803d;
    --color-success-soft: #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-success-text: #15803d;

    --color-warning: #d97706;
    --color-warning-hover: #b45309;
    --color-warning-soft: #fffbeb;
    --color-warning-border: #fde68a;
    --color-warning-text: #b45309;

    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-soft: #fef2f2;
    --color-danger-border: #fecaca;
    --color-danger-text: #b91c1c;

    --color-info: #0284c7;
    --color-info-hover: #0369a1;
    --color-info-soft: #f0f9ff;
    --color-info-border: #bae6fd;
    --color-info-text: #0369a1;

    /* Corners */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* Depth — always on top of a 1px border, never instead of one. */
    --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.06), 0 0 0 0.5px rgb(15 23 42 / 0.02);
    --shadow-sm: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.04);
    --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08), 0 1px 3px rgb(15 23 42 / 0.05);
    --shadow-lg: 0 12px 32px rgb(15 23 42 / 0.14);
    --shadow-up: 0 -1px 3px rgb(15 23 42 / 0.04);

    /* Focus — one ring for every control and button. */
    --focus-border: var(--indigo-400);
    --focus-ring: 0 0 0 3px rgb(79 70 229 / 0.15);
    --focus-ring-danger: 0 0 0 3px rgb(220 38 38 / 0.12);

    /* Motion */
    --duration: 150ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    /* Controls */
    --control-height-sm: 28px;
    --control-height: 34px;
    --control-height-lg: 38px;

    /* Chrome */
    --topbar-height: 56px;
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 70px;
    --sidebar-bg: #111827;
    --sidebar-header-bg: #0b1220;
    --sidebar-border: rgb(255 255 255 / 0.06);
    --sidebar-text: #aab4c3;
    --sidebar-text-strong: #f1f5f9;
    --sidebar-muted: rgb(255 255 255 / 0.38);
    --sidebar-hover-bg: rgb(255 255 255 / 0.05);
    --sidebar-active-bg: rgb(99 102 241 / 0.18);
    --sidebar-active-text: #ffffff;
    --sidebar-active-bar: var(--indigo-400);
    --sidebar-submenu-bg: rgb(0 0 0 / 0.18);

    --backdrop: rgb(15 23 42 / 0.4);

}

/*
 * Dark theme — declared, not yet switched on. When it ships, it overrides the
 * semantic roles above and nothing else; see docs/ui-design-tokens.md.
 *
 * :root[data-theme="dark"] { … }
 */