/* Hallmark · redesign · genre: modern-minimal · pre-emit critique: P5 H4 E5 S4 R5 V4
   ============================================================
   TimeKeeper Admin — Design Tokens (Light-only, OKLCH)
   Modern-minimal system anchored on the brand navy (#17365d / #2F5597).
   All colours are OKLCH; every surface/text/border references a named token.
   ============================================================ */

:root {
    color-scheme: light;

    /* ── Neutral scale — cool grey with a faint blue undertone ── */
    --grey-0:   oklch(100% 0 0);
    --grey-25:  oklch(99% 0.003 258);
    --grey-50:  oklch(97.6% 0.005 258);
    --grey-100: oklch(96% 0.007 258);
    --grey-200: oklch(92.6% 0.009 258);
    --grey-300: oklch(87% 0.012 258);
    --grey-400: oklch(72% 0.016 260);
    --grey-500: oklch(58% 0.019 260);
    --grey-600: oklch(48% 0.022 262);
    --grey-700: oklch(38% 0.026 263);
    --grey-800: oklch(29% 0.03 264);
    --grey-900: oklch(23% 0.03 265);

    /* ── Brand navy scale ── */
    --navy-50:  oklch(96% 0.022 262);
    --navy-100: oklch(92% 0.045 262);
    --navy-200: oklch(85% 0.07 262);
    --navy-300: oklch(74% 0.10 262);
    --navy-400: oklch(63% 0.12 263);
    --navy-500: oklch(53% 0.132 263);   /* ≈ #2F5597 */
    --navy-600: oklch(47% 0.132 264);
    --navy-700: oklch(39% 0.10 263);     /* ≈ #17365d */
    --navy-800: oklch(31% 0.075 264);
    --navy-900: oklch(25% 0.055 265);

    /* ── Semantic feedback ── */
    --success: oklch(55% 0.13 155);
    --success-surface: oklch(96.5% 0.04 155);
    --success-border: oklch(88% 0.06 155);
    --danger: oklch(56% 0.19 27);
    --danger-surface: oklch(96.5% 0.03 27);
    --danger-border: oklch(89% 0.07 27);
    --warning: oklch(64% 0.12 70);
    --warning-surface: oklch(96% 0.05 82);
    --warning-border: oklch(88% 0.09 82);

    /* ── Surfaces ── */
    --canvas: var(--grey-50);
    --surface: var(--grey-0);
    --surface-soft: var(--grey-25);
    --surface-alt: var(--grey-100);
    --surface-inset: var(--grey-50);

    /* ── Sidebar (deep navy) ── */
    --sidebar-bg: var(--navy-900);
    --sidebar-fg: oklch(83% 0.028 262);
    --sidebar-muted: oklch(63% 0.03 262);
    --sidebar-active-bg: oklch(100% 0 0 / 0.09);
    --sidebar-hover-bg: oklch(100% 0 0 / 0.05);
    --sidebar-active-fg: oklch(100% 0 0);
    --sidebar-indicator: oklch(78% 0.11 250);
    --sidebar-border: oklch(100% 0 0 / 0.08);

    /* ── Ink / text ── */
    --ink: var(--grey-900);
    --ink-strong: oklch(21% 0.035 266);
    --muted: var(--grey-500);
    --muted-strong: var(--grey-600);

    /* ── Borders & focus ── */
    --border: var(--grey-200);
    --border-strong: var(--grey-300);
    --ring: var(--navy-400);

    /* ── Accent ── */
    --accent: var(--navy-600);
    --accent-hover: var(--navy-700);
    --accent-soft: var(--navy-50);
    --accent-fg: oklch(100% 0 0);

    /* ── Shadows — soft, layered (modern depth) ── */
    --shadow-xs: 0 1px 2px oklch(24% 0.03 265 / 0.05);
    --shadow-sm: 0 1px 2px oklch(24% 0.03 265 / 0.05), 0 2px 6px oklch(24% 0.03 265 / 0.05);
    --shadow-md: 0 2px 6px oklch(24% 0.03 265 / 0.06), 0 8px 20px oklch(24% 0.03 265 / 0.08);
    --shadow-lg: 0 4px 12px oklch(24% 0.03 265 / 0.08), 0 18px 40px oklch(24% 0.03 265 / 0.14);

    /* ── Spacing (4pt scale) ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* ── Radii — softer, modern ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* ── Layout ── */
    --sidebar-w: 268px;
    --topbar-h: 60px;

    /* ── Focus ring ── */
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring);

    /* ── Typography ── */
    --font: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Consolas", monospace;

    /* ── Type scale ── */
    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-base: 0.8125rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;

    /* ── Motion ── */
    --dur: 170ms;
    --dur-fast: 110ms;
    --ease: cubic-bezier(0.2, 0, 0.15, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}