/*
 * Design tokens of the Back Office: the only colors, sizes, radii, heights and
 * spacing a class can name. The standard Tailwind palette and scales are reset,
 * so text-base, tracking-wide, rounded-2xl or bg-red-500 produce no CSS and fail lint
 * (better-tailwindcss/no-unknown-classes); a spacing step off the scale, p-5,
 * fails better-tailwindcss/no-restricted-classes. Colors come in two levels
 * (decisions.md, 16 October 2026, "два уровня токенов цвета"): the palette,
 * plain variables in :root below, outside @theme, so no class is made from
 * them; and the meanings, --color-* in @theme, which only name a palette step.
 * The colors are the draft's (back-office-draft/src/styles/tokens.css),
 * written in OKLCH without a visible change: each maps back to the draft's
 * 8-bit sRGB color, ink-soft (gray-600) excepted as the grays' comment says.
 * The rules of the colors, the spacing and the borders are in
 * private-docs/conventions/styles.md; the color format and the vocabulary of
 * the meanings are held by scripts/tokens.test.ts. The motion variables are
 * copied from the draft too; the keyframes of motion.css come with the
 * components that use them. The scales come from
 * back-office-draft/docs/feature-map/16-style.md (STY-03, STY-14, STY-15,
 * STY-16). A value off these scales is added here when a screen needs it.
 */

/* Level 1, the palette: steps with numbers, named for now by Untitled UI, where
   the draft's colors come from (#101828 is gray-900); only the steps a meaning
   uses, every one in oklch(). The brandbook replaces the palette, and with it
   these names; the meanings stay. Two entries are named, not stepped, and the
   brandbook leaves them: pure white and Telegram's own blue (#229ed9), a
   foreign brand color. */
:root {
  --blue-50: oklch(0.966 0.016 262);
  --blue-200: oklch(0.88 0.057 262);
  --blue-500: oklch(0.56 0.198 257);
  --blue-600: oklch(0.513 0.182 257);
  --gray-25: oklch(0.992 0.001 263);
  --gray-50: oklch(0.979 0.003 263);
  --gray-100: oklch(0.966 0.005 263);
  --gray-200: oklch(0.943 0.006 263);
  --gray-300: oklch(0.871 0.012 263);
  --gray-400: oklch(0.709 0.028 263);
  --gray-500: oklch(0.545 0.034 263);
  --gray-600: oklch(0.442 0.035 263);
  --gray-700: oklch(0.365 0.035 263);
  --gray-900: oklch(0.21 0.034 263);
  --green-50: oklch(0.975 0.018 156);
  --green-200: oklch(0.899 0.07 156);
  --green-600: oklch(0.551 0.136 155);
  --green-700: oklch(0.488 0.119 155);
  --navy-200: oklch(0.815 0.049 263);
  --navy-400: oklch(0.675 0.072 263);
  --navy-800: oklch(0.238 0.069 263);
  --navy-900: oklch(0.209 0.053 263);
  --orange-50: oklch(0.975 0.02 83);
  --orange-200: oklch(0.899 0.095 80);
  --orange-500: oklch(0.722 0.163 58);
  --orange-700: oklch(0.515 0.145 45);
  --red-50: oklch(0.975 0.013 25);
  --red-200: oklch(0.899 0.055 25);
  --red-500: oklch(0.628 0.198 28);
  --red-700: oklch(0.494 0.169 29);
  --telegram: oklch(0.6623 0.1334 235.92);
  --violet-50: oklch(0.969 0.016 292);
  --violet-700: oklch(0.449 0.201 292);
  --white: oklch(1 0 0);
}

@theme {
  --color-*: initial;
  --text-*: initial;
  --radius-*: initial;
  --height-*: initial;

  /* Inter is kept with the app, not at Google; until its files come in piece
     3 the system font stands in (styles.md). */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Level 2, the meanings (STY-05 - STY-09): only var() of a palette step, or
     color-mix() of one with transparent; a name is a family and suffixes from
     the closed lists of scripts/tokens.test.ts. What each is for: styles.md. */
  --color-ink: var(--gray-900);
  --color-ink-soft: var(--gray-600);
  --color-ink-muted: var(--gray-500);
  --color-ink-faint: var(--gray-400);

  --color-line-soft: var(--gray-100);
  --color-line: var(--gray-200);
  --color-line-deep: var(--gray-300); /* borders of controls: buttons, fields, checkboxes */

  --color-surface: var(--gray-25);
  --color-white: var(--white); /* the surface of cards and fields */

  --color-frame: var(--navy-800);
  --color-frame-deep: var(--navy-900);
  --color-frame-raised: color-mix(in oklch, var(--white) 5%, transparent);
  --color-frame-line: color-mix(in oklch, var(--white) 10%, transparent);
  --color-frame-ink: var(--navy-200);
  --color-frame-ink-muted: var(--navy-400);

  --color-brand: var(--blue-500);
  --color-brand-ink: var(--blue-600);
  --color-brand-hover: var(--blue-600);
  --color-brand-soft: var(--blue-50);
  --color-brand-line: var(--blue-200);

  --color-ok: var(--green-600); /* one green for «хорошо» and «Одобрить» */
  --color-ok-ink: var(--green-700);
  --color-ok-soft: var(--green-50);
  --color-ok-line: var(--green-200);
  --color-warn: var(--orange-500);
  --color-warn-ink: var(--orange-700);
  --color-warn-soft: var(--orange-50);
  --color-warn-line: var(--orange-200);
  --color-risk: var(--red-500);
  --color-risk-ink: var(--red-700);
  --color-risk-soft: var(--red-50);
  --color-risk-line: var(--red-200);

  --color-violet-ink: var(--violet-700);
  --color-violet-soft: var(--violet-50);
  --color-amber-ink: var(--gray-700);
  --color-amber-soft: var(--gray-50);
  --color-pink-ink: var(--gray-700);
  --color-pink-soft: var(--gray-50);
  --color-sky-ink: var(--gray-700);
  --color-sky-soft: var(--gray-50);
  --color-telegram: var(--telegram);

  /* The focus ring; the dim under dialogs and panels (the draft's panel dim).
     Both shares are provisional, until the frame's design in piece 3. */
  --color-focus: color-mix(in oklch, var(--blue-500) 50%, transparent);
  --color-backdrop: color-mix(in oklch, var(--navy-900) 20%, transparent);

  /* The shadcn bridge: the names shadcn-vue's blanks read (scripts/tailwindClasses.ts),
     each a reference to one of our meanings, so a blank from the generator
     works unedited. Outside src/components/shadcn their classes are refused by
     lint. */
  --color-background: var(--color-white);
  --color-foreground: var(--color-ink);
  --color-primary: var(--color-brand);
  --color-primary-foreground: var(--color-white);
  --color-secondary: var(--color-line-soft);
  --color-secondary-foreground: var(--color-ink);
  --color-muted: var(--color-line-soft);
  --color-muted-foreground: var(--color-ink-muted);
  --color-accent: var(--color-brand-soft);
  --color-accent-foreground: var(--color-ink);
  --color-destructive: var(--color-risk);
  --color-destructive-foreground: var(--color-white);
  --color-border: var(--color-line);
  --color-input: var(--color-line-deep);
  --color-ring: var(--color-focus);
  --color-card: var(--color-white);
  --color-card-foreground: var(--color-ink);
  --color-popover: var(--color-white);
  --color-popover-foreground: var(--color-ink);

  /* Text steps (STY-03), each with its line height and tracking; the sizes are
     decided, the line heights and the tracking provisional until a real screen
     (decisions.md, 16 October 2026); which step a role
     takes is the kit's, the table is in styles.md. md is the body text. */
  --text-xs: 12px;
  --text-xs--line-height: 18px;
  --text-xs--letter-spacing: 0em;
  --text-sm: 13px;
  --text-sm--line-height: 20px;
  --text-sm--letter-spacing: 0em;
  --text-md: 14px;
  --text-md--line-height: 22px;
  --text-md--letter-spacing: -0.006em;
  --text-lg: 16px;
  --text-lg--line-height: 24px;
  --text-lg--letter-spacing: -0.011em;
  --text-xl: 22px;
  --text-xl--line-height: 28px;
  --text-xl--letter-spacing: -0.02em;
  --text-2xl: 40px;
  --text-2xl--line-height: 44px;
  --text-2xl--letter-spacing: -0.03em;

  /* No shadow scale yet: Tailwind's are black, and ours, from navy, come
     with the kit in piece 3 (styles.md). */
  --shadow-*: initial;
  --inset-shadow-*: initial;
  --drop-shadow-*: initial;
  --text-shadow-*: initial;

  /* Line height only from a text step: Tailwind's leading names are gone,
     and every leading-* class (leading-none, leading-6) and text-sm/7 are
     refused by lint (scripts/tailwindClasses.ts). */
  --leading-*: initial;

  /* Tracking only for caps: uppercase tracking-caps; every other text takes
     its step's tracking. */
  --tracking-*: initial;
  --tracking-caps: 0.02em;

  /* Radii (STY-14, decisions.md, 16 October 2026): 6 / 8 / 10 / 16 and full;
     a nested element's radius by the rule of styles.md. */
  --radius-sm: 6px; /* keys, checkboxes, menu rows */
  --radius-md: 8px; /* tags, hints, small buttons */
  --radius-lg: 10px; /* buttons, fields, dropdown menus */
  --radius-xl: 16px; /* blocks, cards, panels, dialogs, chat bubbles, the workspace, the sign-in card */
  --radius-full: calc(infinity * 1px); /* chips, pills, counters, switches */

  /* Control heights (STY-15): 30 / 34 / 38 */
  --height-control-sm: 30px;
  --height-control: 34px;
  --height-control-lg: 38px;

  /* Spacing (STY-16): one unit, a class is a multiple of it (p-4 is 16 px),
     so a new grid is this one number; the allowed steps are held by lint
     (scripts/tailwindClasses.ts), their use is in styles.md. */
  --spacing: 4px;

  /* Motion in classes (STY-47): ease-spring and duration-fast, duration-base,
     duration-panel name the variables below, so reduced motion reaches them. */
  --ease-spring: var(--spring);
  --transition-duration-fast: var(--t-fast);
  --transition-duration-base: var(--t-base);
  --transition-duration-panel: var(--t-panel);
}

/* Motion: one critically damped spring (no bounce) and three durations (STY-47). */
:root {
  --spring: linear(
    0,
    0.0182,
    0.0638,
    0.1261,
    0.1973,
    0.272,
    0.3465,
    0.4183,
    0.4859,
    0.5483,
    0.6053,
    0.6566,
    0.7024,
    0.743,
    0.7788,
    0.8101,
    0.8374,
    0.8611,
    0.8816,
    0.8992,
    0.9144,
    0.9274,
    0.9385,
    0.948,
    0.9561,
    0.963,
    0.9688,
    0.9737,
    0.9779,
    0.9814,
    0.9844,
    0.9869,
    0.9891,
    0.9908,
    0.9923,
    0.9936,
    0.9946,
    0.9955,
    0.9963,
    0.9969,
    1
  );
  --t-fast: 200ms; /* press, digits, pills, the queue stripe */
  --t-base: 400ms; /* rows, expanders, menu, tab underline */
  --t-panel: 500ms; /* panels and depth */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-panel: 1ms;
  }
}