/* ==========================================================================
   hello-sender — design tokens (redesign, direction A «Строгий»)
   --------------------------------------------------------------------------
   Layers: primitive palette (--p-*) → scales → semantic tokens (--bg, --text, --accent …).
   Theme: <html data-theme="light|dark">, set before first paint by the inline script in
   base.html (choice in localStorage "hs-theme", default — the OS theme). No data-theme →
   prefers-color-scheme.
   Rule: yellow is ONLY a background under black text (--accent / --on-accent).
   Contrast of every pair: design/CONTRAST.md (node design/tools/contrast.mjs).
   ========================================================================== */

/* Inter (SIL OFL 1.1, fonts/OFL.txt), variable weight 400–700, served from this server. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-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;
}

:root {
  /* ── 1. Primitive palette ─────────────────────────────────────────────── */
  --p-white: #ffffff;
  --p-black: #0a0a0a;
  --p-yellow-300: #ffe066;
  --p-yellow-400: #ffd60a;   /* brand yellow */
  --p-yellow-500: #f5c400;
  --p-yellow-600: #e0b000;

  /* neutral (direction A: pure grey) */
  --p-n-50: #f7f7f7;  --p-n-100: #efefef; --p-n-200: #e2e2e2; --p-n-300: #cfcfcf;
  --p-n-400: #a3a3a3; --p-n-500: #737373; --p-n-600: #525252; --p-n-700: #3a3a3a;
  --p-n-800: #262626; --p-n-850: #1c1c1c; --p-n-900: #141414; --p-n-950: #0a0a0a;

  /* warm neutral (direction B: stone) */
  --p-w-50: #f7f6f2;  --p-w-100: #efede7; --p-w-200: #e6e3dc; --p-w-300: #d6d2c9;
  --p-w-400: #a8a29e; --p-w-500: #78716c; --p-w-600: #57534e; --p-w-700: #44403c;
  --p-w-800: #2b2926; --p-w-850: #232120; --p-w-900: #1b1a18; --p-w-950: #121110;

  /* semantic hues (status only, always with an icon/label, never alone) */
  --p-green-700: #15803d; --p-green-900: #14532d; --p-green-100: #dcfce7; --p-green-300: #86efac; --p-green-950: #0c2a18;
  --p-red-700: #b91c1c;   --p-red-900: #7f1d1d;   --p-red-100: #fee2e2;   --p-red-300: #fca5a5;   --p-red-950: #350f0f;
  --p-blue-700: #1d4ed8;  --p-blue-900: #1e3a8a;  --p-blue-100: #dbeafe;  --p-blue-300: #93c5fd;  --p-blue-950: #0f1d3d;

  /* ── 2. Scales ────────────────────────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --space-0: 0;     --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px;  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.2; --leading-normal: 1.45;

  --border-width: 1px;
  --focus-width: 2px;

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 260ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.3, 0, 0, 1.2);

  --z-header: 20; --z-dropdown: 40; --z-modal: 60; --z-toast: 80;
  --container-operator: 1120px;
  --container-admin: 1280px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
}

:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;

  --control-h-sm: 32px;
  --control-h: 40px;
  --control-h-lg: 48px;

  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px;
  --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-phone: 28px;

  --card-pad: var(--space-5);
  --section-gap: var(--space-6);
}

/* Light (default) */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--p-n-50);
  --surface: var(--p-white);
  --surface-2: var(--p-n-100);
  --surface-sunken: var(--p-n-100);
  --text: var(--p-black);
  --text-muted: var(--p-n-600);
  --text-subtle: #6b6b6b;                 /* ≥4.5 on bg, surface and surface-2 (see CONTRAST.md) */
  --border: var(--p-n-200);               /* decorative dividers only */
  --border-strong: var(--p-n-500);        /* control outlines: ≥3:1 */
  --header-bg: var(--p-black);
  --header-text: var(--p-white);
  --header-muted: var(--p-n-400);
  --accent: var(--p-yellow-400);
  --accent-hover: var(--p-yellow-500);
  --accent-active: var(--p-yellow-600);
  --on-accent: var(--p-black);
  --inverse-bg: var(--p-black);
  --inverse-text: var(--p-white);
  --focus-inner: var(--p-black);
  --focus-outer: var(--p-yellow-400);
  --success-text: var(--p-green-700);  --success-bg: var(--p-green-100);  --success-on: var(--p-green-900);
  --danger-text: var(--p-red-700);     --danger-bg: var(--p-red-100);     --danger-on: var(--p-red-900);
  --info-text: var(--p-blue-700);      --info-bg: var(--p-blue-100);      --info-on: var(--p-blue-900);
  --warning-bg: var(--p-yellow-400);   --warning-on: var(--p-black);
  --neutral-bg: var(--p-n-100);        --neutral-on: var(--p-n-800);
  --overlay: rgb(10 10 10 / 0.55);
  --shadow-sm: 0 1px 0 rgb(0 0 0 / 0.04);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.06), 0 0 0 1px var(--border);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.18);
}

/* Dark */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--p-n-950);
  --surface: var(--p-n-900);
  --surface-2: var(--p-n-850);
  --surface-sunken: var(--p-n-950);
  --text: #fafafa;
  --text-muted: var(--p-n-400);
  --text-subtle: #8f8f8f;
  --border: var(--p-n-800);
  --border-strong: #8a8a8a;
  --header-bg: #000000;
  --header-text: #fafafa;
  --header-muted: var(--p-n-400);
  --accent: var(--p-yellow-400);
  --accent-hover: var(--p-yellow-300);
  --accent-active: var(--p-yellow-500);
  --on-accent: var(--p-black);
  --inverse-bg: #fafafa;
  --inverse-text: var(--p-black);
  --focus-inner: var(--p-black);
  --focus-outer: var(--p-yellow-400);
  --success-text: #4ade80;  --success-bg: var(--p-green-950); --success-on: var(--p-green-300);
  --danger-text: #f87171;   --danger-bg: var(--p-red-950);   --danger-on: var(--p-red-300);
  --info-text: #60a5fa;     --info-bg: var(--p-blue-950);    --info-on: var(--p-blue-300);
  --warning-bg: var(--p-yellow-400); --warning-on: var(--p-black);
  --neutral-bg: var(--p-n-800);      --neutral-on: #e5e5e5;
  --overlay: rgb(0 0 0 / 0.7);
  --shadow-sm: none;
  --shadow-md: 0 0 0 1px var(--border);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.6), 0 0 0 1px var(--border);
}

/* No JS / first paint: follow the OS theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: var(--p-n-950); --surface: var(--p-n-900); --surface-2: var(--p-n-850); --surface-sunken: var(--p-n-950);
    --text: #fafafa; --text-muted: var(--p-n-400); --text-subtle: #8f8f8f;
    --border: var(--p-n-800); --border-strong: #8a8a8a;
    --header-bg: #000000; --header-text: #fafafa; --header-muted: var(--p-n-400);
    --accent-hover: var(--p-yellow-300); --accent-active: var(--p-yellow-500);
    --inverse-bg: #fafafa; --inverse-text: var(--p-black);
    --success-text: #4ade80; --success-bg: var(--p-green-950); --success-on: var(--p-green-300);
    --danger-text: #f87171; --danger-bg: var(--p-red-950); --danger-on: var(--p-red-300);
    --info-text: #60a5fa; --info-bg: var(--p-blue-950); --info-on: var(--p-blue-300);
    --neutral-bg: var(--p-n-800); --neutral-on: #e5e5e5; --overlay: rgb(0 0 0 / 0.7);
    --shadow-sm: none; --shadow-md: 0 0 0 1px var(--border); --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.6), 0 0 0 1px var(--border);
  }
}