/* UI 2.0 design tokens (WP50). Every colour, size and motion value in the UI comes from here.
   Light is the default; dark follows the system unless the user picked a theme (html[data-theme]). */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../fonts/NotoSansDevanagari-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

:root {
  color-scheme: light;

  /* type: one family, fixed rem-free pixel scale for a dense desktop tool */
  --font-ui: "Geist", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-body: 12.5px;   /* density contract 06 §7 */
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 22px;
  --fs-grid: 12.5px;
  --lh-tight: 1.25;
  --lh-body: 1.5;
  --tracking-tight: -0.015em;

  /* density contract (06 §7): field and grid row heights stay as specified */
  --h-field: 28px;
  --h-row: 26px;
  --h-control: 32px;

  /* spacing: 4px scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* shape: controls 6, panels 10, small pills fully round */
  --r-ctrl: 6px;
  --r-panel: 10px;
  --r-pill: 999px;

  /* motion: one ease, short durations; keyboard-repeated actions never animate */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;

  /* layers */
  --z-sticky: 20;
  --z-sidebar: 30;
  --z-topbar: 40;
  --z-popover: 60;
  --z-dialog: 80;
  --z-toast: 90;
  --z-progress: 100;

  /* layout */
  --w-sidebar: 248px;
  --w-rail: 60px;
  --h-topbar: 52px;

  /* colour roles, light */
  --surface-page: #f6f7f9;
  --surface: #ffffff;
  --surface-sunken: #f0f2f5;
  --surface-raised: #ffffff;
  --surface-chrome: rgb(250 251 252 / 0.86);
  --surface-hover: #eef0f4;
  --surface-selected: #e8edfd;

  --border: #e3e6eb;
  --border-strong: #cdd2da;
  --border-input: #868e9c;   /* 3:1 on the page and on cards (WCAG 1.4.11): a field's edge is how it is found */

  --text: #161a21;
  --text-secondary: #4a5261;
  --text-muted: #5c6575;     /* 4.5:1 on every surface, including the selected row */
  --text-faint: #7a8393;     /* icons and disabled text only: 3:1, below the 4.5:1 text needs */
  --text-on-accent: #f7f9ff;

  --accent: #2b4fd8;
  --accent-hover: #2442bb;
  --accent-active: #1f399f;
  --accent-subtle: #edf1fd;
  --accent-text: #2442bb;
  --focus-ring: 0 0 0 3px rgb(43 79 216 / 0.65);   /* 3:1 against the page and cards */

  --success: #17784a;
  --success-subtle: #e7f5ed;
  --warning: #9a5b06;
  --warning-subtle: #fdf3e2;
  --danger: #c2322b;
  --danger-subtle: #fcebea;
  --info: var(--accent);
  --info-subtle: var(--accent-subtle);

  --selection: rgb(43 79 216 / 0.18);
  --scrollbar: #c9ced7;
  --shadow-float: 0 12px 32px -8px rgb(22 26 33 / 0.18), 0 2px 6px -2px rgb(22 26 33 / 0.10);
  --shadow-low: 0 1px 2px rgb(22 26 33 / 0.06);

  /* legacy names used by kit.css, mapped onto the roles above */
  --bg-base: var(--surface-page);
  --bg-surface: var(--surface);
  --bg-surface-elevated: var(--surface-sunken);
  --bg-input: var(--surface);
  --border-subtle: var(--border);
  --border-default: var(--border-strong);
  --border-focus: var(--accent);
  --text-primary: var(--text);
  --accent-light: var(--accent-hover);
  --accent-glow: rgb(43 79 216 / 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-page: #0f1216;
    --surface: #151920;
    --surface-sunken: #11151b;
    --surface-raised: #1a1f27;
    --surface-chrome: rgb(17 21 27 / 0.82);
    --surface-hover: #1d232c;
    --surface-selected: #1c2540;
    --border: #232a34;
    --border-strong: #303844;
    --border-input: #646e7e;
    --text: #e6e9ef;
    --text-secondary: #b0b7c3;
    --text-muted: #8a93a1;
    --text-faint: #6a7381;
    --text-on-accent: #0b1020;
    --accent: #7b97ff;
    --accent-hover: #95acff;
    --accent-active: #6c88f2;
    --accent-subtle: rgb(123 151 255 / 0.14);
    --accent-text: #9fb3ff;
    --focus-ring: 0 0 0 3px rgb(123 151 255 / 0.65);
    --success: #4cc38a;
    --success-subtle: rgb(76 195 138 / 0.14);
    --warning: #e3a447;
    --warning-subtle: rgb(227 164 71 / 0.14);
    --danger: #f2716a;
    --danger-subtle: rgb(242 113 106 / 0.14);
    --selection: rgb(123 151 255 / 0.30);
    --scrollbar: #363f4c;
    --shadow-float: 0 16px 40px -8px rgb(0 0 0 / 0.55), 0 2px 8px -2px rgb(0 0 0 / 0.4);
    --shadow-low: 0 1px 2px rgb(0 0 0 / 0.4);
    --accent-glow: rgb(123 151 255 / 0.25);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #0f1216;
  --surface: #151920;
  --surface-sunken: #11151b;
  --surface-raised: #1a1f27;
  --surface-chrome: rgb(17 21 27 / 0.82);
  --surface-hover: #1d232c;
  --surface-selected: #1c2540;
  --border: #232a34;
  --border-strong: #303844;
  --border-input: #646e7e;
  --text: #e6e9ef;
  --text-secondary: #b0b7c3;
  --text-muted: #8a93a1;
  --text-faint: #6a7381;
  --text-on-accent: #0b1020;
  --accent: #7b97ff;
  --accent-hover: #95acff;
  --accent-active: #6c88f2;
  --accent-subtle: rgb(123 151 255 / 0.14);
  --accent-text: #9fb3ff;
  --focus-ring: 0 0 0 3px rgb(123 151 255 / 0.65);
  --success: #4cc38a;
  --success-subtle: rgb(76 195 138 / 0.14);
  --warning: #e3a447;
  --warning-subtle: rgb(227 164 71 / 0.14);
  --danger: #f2716a;
  --danger-subtle: rgb(242 113 106 / 0.14);
  --selection: rgb(123 151 255 / 0.30);
  --scrollbar: #363f4c;
  --shadow-float: 0 16px 40px -8px rgb(0 0 0 / 0.55), 0 2px 8px -2px rgb(0 0 0 / 0.4);
  --shadow-low: 0 1px 2px rgb(0 0 0 / 0.4);
  --accent-glow: rgb(123 151 255 / 0.25);
}

/* Motion off: the durations go to zero, and anything with its own timing (spinners, shimmer, older kit.css) stops too. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* Glass off: every translucent bar gets the solid card fill and no blur. */
@media (prefers-reduced-transparency: reduce) {
  :root { --surface-chrome: var(--surface) !important; }
  *, *::before, *::after, ::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}