/* Entersight Front Office — все токены одним файлом (собрано из tokens/*.css дизайн-системы). Подключение: <link rel="stylesheet" href="/brand/tokens.css"> */

/* ── tokens/fonts.css ── */
/* Gilroy substitute — see readme.md "Type substitution". Manrope (UI/display) + JetBrains Mono (numerics, codes). Cyrillic + Latin subsets, self-hosted. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jetbrains-mono-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jetbrains-mono-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/manrope-400800-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/manrope-400800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── tokens/colors.css ── */
/* ── Entersight Front Office — colour tokens ───────────────────────────────
   Base palette comes verbatim from the Entersight brandbook (2022).
   Front Office adds one signature accent (Amber) and a dark operator shell,
   which is what visually separates it from the corporate/marketing brand. */

:root {
  /* Brand — brandbook values, do not alter */
  --es-blue: #00A3FF;          /* entersight blue · PANTONE 2995 C */
  --es-white: #FFFFFF;         /* WHITE C */
  --es-light-gray: #F3F3F3;    /* LIGHT GRAY · PANTONE 649 C */

  /* Sub-brand colours — brandbook */
  --es-purple: #7F00E3;        /* финтех · PANTONE 266 C */
  --es-orange: #FF441B;        /* контрагенты · PANTONE 172 C */
  --es-green: #00C798;         /* бухгалтерия · PANTONE 3395 C */
  --es-bright-green: #93D700;  /* логистика · PANTONE 375 C */

  /* Front Office signature accent — proposed, not in the 2022 brandbook */
  --fo-amber: #FFB200;

  /* Blue ramp (derived from --es-blue in oklch) */
  --blue-50: #E8F6FF;
  --blue-100: #CCEBFF;
  --blue-200: #99D6FF;
  --blue-300: #5CBEFF;
  --blue-400: #1FAAFF;
  --blue-500: #00A3FF;
  --blue-600: #0086D6;
  --blue-700: #0069A8;
  --blue-800: #004E7D;
  --blue-900: #003555;

  /* Neutral ramp — cool, tuned to the blue; ink end is the operator shell */
  --neutral-0:  #FFFFFF;
  --neutral-25: #FAFBFC;
  --neutral-50: #F3F3F3;   /* brandbook LIGHT GRAY */
  --neutral-100:#E9ECEF;
  --neutral-200:#DCE1E6;
  --neutral-300:#C3CBD3;
  --neutral-400:#9AA5B1;
  --neutral-500:#71808F;
  --neutral-600:#53616F;
  --neutral-700:#3A4753;
  --neutral-800:#232E38;
  --neutral-900:#141C23;
  --neutral-950:#0B1116;

  /* Semantic status — reuse brand hues so alerts stay in the family */
  --status-success: #00C798;
  --status-success-bg: #E4FAF4;
  --status-warning: #FFB200;
  --status-warning-bg: #FFF5DE;
  --status-danger: #FF441B;
  --status-danger-bg: #FFEBE6;
  --status-info: #00A3FF;
  --status-info-bg: #E8F6FF;
  --status-neutral: #71808F;
  --status-neutral-bg: #F3F3F3;

  /* ── Semantic aliases — light work surfaces ── */
  --surface-app: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-25);
  --surface-raised: var(--neutral-0);
  --surface-hover: var(--neutral-50);
  --surface-active: var(--neutral-100);
  --surface-selected: var(--blue-50);
  --surface-disabled: var(--neutral-100);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-inverse: var(--neutral-0);
  --text-brand: var(--es-blue);
  --text-danger: var(--status-danger);
  --text-success: #00976F;

  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--es-blue);

  --action-primary: var(--es-blue);
  --action-primary-hover: var(--blue-600);
  --action-primary-active: var(--blue-700);
  --action-tender: var(--fo-amber);       /* cash / tender keys */
  --action-tender-hover: #E9A300;
  --action-destructive: var(--status-danger);
  --action-destructive-hover: #E03612;

  --focus-ring: 0 0 0 3px rgb(0 163 255 / 0.32);

  /* ── Operator shell (dark chrome: sidebar, header, checkout column) ── */
  --shell-bg: var(--neutral-950);
  --shell-bg-raised: #131B22;
  --shell-border: #23303A;
  --shell-text: #E7EDF2;
  --shell-text-muted: #8899A6;
  --shell-hover: #1B252E;
  --shell-selected: #10293A;
  --shell-accent: var(--es-blue);
}

/* Dark scope — apply to the operator shell or a fully dark station */
.fo-dark {
  --surface-app: var(--neutral-950);
  --surface-card: var(--shell-bg-raised);
  --surface-sunken: #0E1519;
  --surface-raised: #1A242C;
  --surface-hover: var(--shell-hover);
  --surface-active: #22303A;
  --surface-selected: var(--shell-selected);
  --surface-disabled: #1A242C;

  --text-primary: var(--shell-text);
  --text-secondary: #A7B6C2;
  --text-muted: var(--shell-text-muted);
  --text-disabled: #566574;
  --text-inverse: var(--neutral-900);

  --border-subtle: #1C262F;
  --border-default: var(--shell-border);
  --border-strong: #33434F;

  --status-success-bg: #0C2A24;
  --status-warning-bg: #2E2410;
  --status-danger-bg: #2E1712;
  --status-info-bg: #0A2233;
  --status-neutral-bg: #1B252E;
}

/* ── tokens/typography.css ── */
/* Typography — Manrope stands in for Gilroy (brandbook), JetBrains Mono for
   numerics, barcodes, SKUs and receipt columns. */

:root {
  --font-display: 'Manrope', 'Gilroy', system-ui, sans-serif;
  --font-body: 'Manrope', 'Gilroy', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Display — marketing / big statements. Brandbook sets these lowercase. */
  --text-display-1: 800 64px/0.95 var(--font-display);
  --text-display-2: 800 48px/1.0 var(--font-display);
  --text-display-3: 700 36px/1.05 var(--font-display);

  /* Product headings — desktop POS runs tight and small */
  --text-h1: 700 24px/1.2 var(--font-display);
  --text-h2: 700 20px/1.25 var(--font-display);
  --text-h3: 600 16px/1.3 var(--font-display);
  --text-h4: 600 14px/1.35 var(--font-display);

  /* Body / UI */
  --text-body-lg: 400 15px/1.5 var(--font-body);
  --text-body: 400 13px/1.45 var(--font-body);
  --text-body-sm: 400 12px/1.4 var(--font-body);
  --text-label: 600 12px/1.3 var(--font-body);
  --text-caption: 400 11px/1.35 var(--font-body);
  --text-overline: 700 10px/1.2 var(--font-body);

  /* Numerics — always tabular. Totals are the loudest thing on a POS screen. */
  --text-amount-xl: 700 40px/1.05 var(--font-mono);
  --text-amount-lg: 700 24px/1.15 var(--font-mono);
  --text-amount: 500 13px/1.4 var(--font-mono);
  --text-code: 400 12px/1.4 var(--font-mono);

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-overline: 0.12em;
}

/* ── tokens/spacing.css ── */
/* Spacing — 4px base. Front Office is a dense desktop app: most gaps
   land on 8 / 12 / 16. */
:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;

  /* Control geometry */
  --control-h-sm: 26px;
  --control-h-md: 32px;
  --control-h-lg: 40px;
  --control-h-xl: 56px;   /* tender / numpad keys — touch-safe */
  --control-pad-x: 12px;

  /* Layout */
  --shell-sidebar-w: 216px;
  --shell-sidebar-w-collapsed: 56px;
  --shell-header-h: 48px;
  --shell-statusbar-h: 28px;
  --checkout-column-w: 420px;
  --row-h: 36px;
  --row-h-lg: 44px;
  --pane-gap: 12px;
  --pane-pad: 16px;
}

/* ── tokens/radius.css ── */
/* Radii — Front Office deliberately runs tighter than the marketing brand,
   which uses full pills on buttons. Pills survive only on status chips. */
:root {
  --radius-0: 0;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;   /* default control radius */
  --radius-lg: 10px;  /* cards, panes */
  --radius-xl: 14px;  /* dialogs, tender panel */
  --radius-2xl: 20px;
  --radius-pill: 999px;

  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-dialog: var(--radius-xl);
  --radius-chip: var(--radius-pill);
  /* Sub-brand icon plates in the brandbook use a ~28% squircle */
  --radius-mark: 22%;
}

/* ── tokens/elevation.css ── */
/* Elevation — flat by default. Shadows appear only where something floats
   above the work surface (menus, dialogs, drag). Panes use borders, not shadows. */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgb(11 17 22 / 0.06);
  --shadow-sm: 0 1px 3px rgb(11 17 22 / 0.08), 0 1px 2px rgb(11 17 22 / 0.04);
  --shadow-md: 0 4px 12px rgb(11 17 22 / 0.10), 0 1px 3px rgb(11 17 22 / 0.06);
  --shadow-lg: 0 12px 32px rgb(11 17 22 / 0.16), 0 2px 8px rgb(11 17 22 / 0.08);
  --shadow-dialog: 0 24px 64px rgb(11 17 22 / 0.28);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.6);

  --scrim: rgb(11 17 22 / 0.55);
  --blur-scrim: 2px;
}

/* ── tokens/motion.css ── */
/* Motion — a cashier is faster than the animation. Everything is short and
   linear-ish; nothing bounces, nothing slides in from off-screen. */
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  --dur-instant: 60ms; /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-medium: 180ms; /* @kind other */
  --dur-slow: 260ms; /* @kind other */

  --transition-control: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-medium: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
  }
}

/* ── tokens/patterns.css ── */
/* Brand patterns & gradients.
   The brandbook's pattern family is built from barcodes ("штрихкоды — важная
   составляющая товароучета"). The PDF's pattern artwork uses PDF shadings that
   could not be exported losslessly, so the stripe pattern is reproduced here in
   CSS at the documented rhythm. Ask the brand team for the original vector packs
   (гайд, слайды 18–20) if you need print-fidelity artwork. */

:root {
  --gradient-blue: linear-gradient(135deg, #00C2FF 0%, #00A3FF 45%, #0069A8 100%); /* @kind other */
  --gradient-ink: linear-gradient(160deg, #1B2530 0%, #0B1116 100%); /* @kind other */
  --gradient-amber: linear-gradient(135deg, #FFC93D 0%, #FFB200 100%); /* @kind other */
  --gradient-purple: linear-gradient(135deg, #A73BFF 0%, #7F00E3 100%); /* @kind other */
  --gradient-green: linear-gradient(135deg, #2AE3B6 0%, #00C798 100%); /* @kind other */
  --gradient-orange: linear-gradient(135deg, #FF7A55 0%, #FF441B 100%); /* @kind other */

  /* Barcode pattern: irregular bar widths on a 48px repeat, low contrast.
     Overlay on a gradient of a neighbouring tone, per the brandbook. */
  --pattern-barcode: repeating-linear-gradient(90deg,
    currentColor 0 2px, transparent 2px 6px,
    currentColor 6px 11px, transparent 11px 14px,
    currentColor 14px 16px, transparent 16px 23px,
    currentColor 23px 30px, transparent 30px 33px,
    currentColor 33px 35px, transparent 35px 41px,
    currentColor 41px 44px, transparent 44px 48px); /* @kind other */
  --pattern-barcode-opacity: 0.14; /* @kind other */
}

/* Utility: <div class="es-barcode"> — inherits colour, sits behind content. */
.es-barcode {
  background-image: var(--pattern-barcode);
  opacity: var(--pattern-barcode-opacity);
}
.es-barcode-v {
  background-image: var(--pattern-barcode);
  opacity: var(--pattern-barcode-opacity);
  transform: rotate(90deg);
}

/* ── tokens/base.css ── */
/* Base — minimal resets and shared primitives. Consumers get this for free. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--text-body);
  color: var(--text-primary);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--blue-600); text-decoration: underline; }
a:active { color: var(--blue-700); }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

h1 { font: var(--text-h1); margin: 0; letter-spacing: var(--tracking-tight); }
h2 { font: var(--text-h2); margin: 0; letter-spacing: var(--tracking-tight); }
h3 { font: var(--text-h3); margin: 0; }
h4 { font: var(--text-h4); margin: 0; }
p  { margin: 0; text-wrap: pretty; }

::selection { background: var(--blue-100); color: var(--neutral-900); }

/* Scrollbars — thin, neutral, always visible on desktop */
* { scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--neutral-400); }

/* Display type is set lowercase in the brand's own materials */
.es-display { font: var(--text-display-2); letter-spacing: var(--tracking-tight); text-transform: lowercase; }
.es-overline { font: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-muted); }
.es-amount { font: var(--text-amount); font-variant-numeric: tabular-nums; }