/*
 * Design tokens: Actum design system, Appendix A «tokens.css», verbatim except the four --ff-* stacks,
 * which use the plain-CSS families from fonts.css instead of next/font variables (as the doc instructs).
 * Dark is the default; light and system come from <html data-theme>, rendered on the server from the
 * alpi_theme cookie (src/admin/context.ts). Accent is lilac «Бузок», flat, never a gradient.
 * --accent-solid: small accent marks (status dots, selected edge) that must stay visible;
 * --nav-on*: the current nav item and tab (a grey pill in dark, a lilac one in light).
 */
:root {
  /* fonts: families from fonts.css */
  --ff-display: "Fixel Display", system-ui, sans-serif;
  --ff-text: "Fixel Text", system-ui, sans-serif;
  --ff-meta: "Martian Num", "Fixel Text", system-ui, sans-serif; /* digits : / $ % . in Martian Mono; «№» stays Fixel (Martian's reads as «₱» at 12–14 px) */
  --ff-mono: "Martian Mono", "Martian Mono Cyr", ui-monospace, monospace; /* whole string in Martian Mono */

  /* type scale */
  --fs-h1: 52px;   --lh-h1: 1.02;  --tr-h1: -0.045em;
  --fs-h2: 24px;   --lh-h2: 1.15;  --tr-h2: -0.025em;
  --fs-h3: 20px;   --lh-h3: 1.2;   --tr-h3: -0.02em;
  --fs-logo: 21px; --tr-logo: -0.035em;
  --fs-write: 19px; --lh-write: 2.35; --tr-write: -0.005em;
  --fs-body: 15px; --lh-body: 1.55;
  --fs-ui: 14px;
  --fs-small: 13.5px;
  --fs-meta: 13px; --lh-meta: 1.4;
  --fs-chip: 12.5px;
  --fs-label: 11px;
  --fs-num-xl: 64px; --tr-num-xl: -0.07em;
  --lh-log: 1.9;

  /* spacing (4 px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 40px; --s-9: 56px; --s-10: 90px;

  /* radii */
  --r-panel: 20px;   /* Panel, CommandBar dialog */
  --r-block: 14px;   /* Block, CommandBar trigger, toasts */
  --r-control: 11px; /* ThemeSwitch track, buttons (primary, ghost) */
  --r-chip: 9px;     /* option chips, inputs */
  --r-inner: 8px;    /* segments, tabs, focus outline */
  --r-tag: 6px;      /* kbd, agent chip, logo square, skeleton bars */
  --r-pill: 999px;

  /* layout */
  --page-colleague: 1180px; --page-owner: 1280px; --side-w: 460px; --gutter: 24px;
  /* side column of the other admin pages: as wide as the inbox card, narrower on small laptops */
  --side-page: clamp(340px, 34vw, var(--side-w));

  /* motion */
  /* DECISIONS 3e: reactions 120–240 ms, brand moments 400–800 ms, marks 60–80 ms apart */
  --dur-fast: 150ms; --dur-base: 220ms; --dur-rise: 600ms; --dur-mark: 500ms;
  --stagger-mark: 80ms; --stagger-row: 110ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .5, 1); /* progress ring: a short spring */
  --ease-pop: cubic-bezier(.3, 1.25, .5, 1);    /* toasts: spring in, no visible bounce */

  /* layers */
  --z-top: 10; --z-dialog: 40; --z-toast: 50; --z-cursor: 60; /* cursor light: above everything, never takes clicks */
  --cursor-size: 48px;
}
@media (max-width: 640px) { :root { --gutter: 16px; --fs-write: 17px; } }
@media (max-width: 760px) { :root { --fs-h1: 40px; --fs-num-xl: 48px; } }

/* dark: the default theme */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07080A; --surface: #0E0F12; --raised: #141519; --hover: #1A1C21;
  --line: rgb(255 255 255 / .07); --line-2: rgb(255 255 255 / .12);
  --ink: #F3F4F6; --ink-2: #A3A9B3; --ink-3: #7E848E;
  --accent: #C9B8FF; --accent-ink: #0A0B0C; --accent-text: #D3C6FF;
  --accent-wash: rgb(201 184 255 / .11); --accent-line: rgb(201 184 255 / .55); --accent-solid: #C9B8FF;
  --ask: #FFB45C; --ask-wash: rgb(255 180 92 / .08); --ask-line: rgb(255 180 92 / .55);
  --danger: #FF7A7A; --danger-wash: rgb(255 122 122 / .09);
  --nav-on: var(--hover); --nav-on-ink: var(--ink); --nav-on-meta: var(--ink-3);
  --grid: rgb(255 255 255 / .035);
  --glow: var(--accent-wash);
  --cursor-rgb: 201 184 255; --cursor-a: .30; --cursor-wave-a: .6; --cursor-blend: screen; /* CursorLight: spot and soft click wave */
  --shadow-drop: 0 24px 48px -24px rgb(0 0 0 / .6);
  --shadow: 0 0 0 1px var(--line), var(--shadow-drop);
  --shadow-accent: 0 0 0 1px rgb(0 0 0 / .1), 0 8px 24px -10px var(--accent-line);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F7F8; --surface: #FFFFFF; --raised: #FBFBFC; --hover: #F1F2F4;
  --line: rgb(10 12 16 / .08); --line-2: rgb(10 12 16 / .14);
  --ink: #0A0C10; --ink-2: #555C68; --ink-3: #676D77;
  --accent: #D9CCFF; --accent-ink: #0A0B0C; --accent-text: #5537C2;
  --accent-wash: rgb(150 120 255 / .14); --accent-line: #7E62E0; --accent-solid: #7E62E0;
  --ask: #B45309; --ask-wash: rgb(245 158 11 / .09); --ask-line: rgb(180 83 9 / .6);
  --danger: #B42318; --danger-wash: rgb(180 35 24 / .07);
  --nav-on: #E4DAFF; --nav-on-ink: #5537C2; --nav-on-meta: #5537C2;
  --grid: rgb(10 12 16 / .025);
  --glow: var(--accent-wash);
  --cursor-rgb: 126 98 224; --cursor-a: .22; --cursor-wave-a: .45; --cursor-blend: multiply;
  --shadow-drop: 0 24px 48px -28px rgb(10 12 16 / .25);
  --shadow: 0 0 0 1px var(--line), var(--shadow-drop);
  --shadow-accent: 0 0 0 1px rgb(0 0 0 / .1), 0 8px 24px -10px var(--accent-line);
}
@media (prefers-color-scheme: light) {
  /* keep identical to [data-theme="light"] */
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: #F6F7F8; --surface: #FFFFFF; --raised: #FBFBFC; --hover: #F1F2F4;
    --line: rgb(10 12 16 / .08); --line-2: rgb(10 12 16 / .14);
    --ink: #0A0C10; --ink-2: #555C68; --ink-3: #676D77;
    --accent: #D9CCFF; --accent-ink: #0A0B0C; --accent-text: #5537C2;
    --accent-wash: rgb(150 120 255 / .14); --accent-line: #7E62E0; --accent-solid: #7E62E0;
    --ask: #B45309; --ask-wash: rgb(245 158 11 / .09); --ask-line: rgb(180 83 9 / .6);
    --danger: #B42318; --danger-wash: rgb(180 35 24 / .07);
    --nav-on: #E4DAFF; --nav-on-ink: #5537C2; --nav-on-meta: #5537C2;
    --grid: rgb(10 12 16 / .025);
    --glow: var(--accent-wash);
    --cursor-rgb: 126 98 224; --cursor-a: .22; --cursor-wave-a: .45; --cursor-blend: multiply;
    --shadow-drop: 0 24px 48px -28px rgb(10 12 16 / .25);
    --shadow: 0 0 0 1px var(--line), var(--shadow-drop);
    --shadow-accent: 0 0 0 1px rgb(0 0 0 / .1), 0 8px 24px -10px var(--accent-line);
  }
}