/* Design tokens for "Запись на приём". C may reuse this file as is.
   Product screens use --accent (buyer's colour, one of the AA-checked palette);
   the demo layer uses --bk-* (BotKraft brand). Contrast values are noted next to colours. */

:root {
  color-scheme: light;

  /* surfaces and text (light) */
  --bg: #F1F5F9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --text: #0F172A;            /* 17.8:1 on surface */
  --text-2: #475569;          /* 7.6:1 on surface */
  --line: #E2E8F0;            /* decorative dividers only */
  --field-line: #64748B;      /* input borders, 4.8:1 (non-text 3:1 required) */

  /* buyer accent, default "blue" from the palette */
  --accent: #2563EB;          /* 5.2:1 with #fff text */
  --on-accent: #FFFFFF;
  --accent-soft: #EFF6FF;
  --accent-text: #1D4ED8;     /* 6.7:1 on surface */

  /* statuses: text colours pass 4.5:1 on surface and on their soft background */
  --ok: #047857;  --ok-soft: #ECFDF5;
  --warn: #B45309; --warn-soft: #FFFBEB;
  --err: #B91C1C; --err-soft: #FEF2F2;

  /* BotKraft demo layer */
  --bk-bar: #0F172A;
  --bk-bar-text: #F1F5F9;
  --bk-cta: #34D399;          /* bg for the CTA, text --bk-cta-text: 9.9:1 */
  --bk-cta-text: #052E21;
  --bk-hint: #ECFDF5;
  --bk-hint-line: #047857;
  --bk-hint-text: #064E3B;

  /* messenger bubbles (preview of notifications) */
  --bubble: #FFFFFF;
  --chat-bg: #DCE6EF;

  /* type: 17px body for 30-40+ audience; everything in rem so system font size scales */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.875rem;   /* 14px, minimum */
  --fs-s: 0.9375rem;   /* 15px */
  --fs-m: 1.0625rem;   /* 17px, body and inputs */
  --fs-l: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;     /* 24px */
  --fs-xxl: 1.75rem;   /* 28px */
  --lh: 1.5;

  /* 4px grid */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem; --s12: 3rem;

  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-full: 999px;
  --tap: 3rem;          /* 48px main buttons */
  --tap-min: 2.75rem;   /* 44px any target */
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);
  --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent);
}

/* dark: system preference unless the page forces light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1220;
    --surface: #111A2E;
    --surface-2: #17223A;
    --text: #E2E8F0;          /* 13.9:1 */
    --text-2: #A3B1C6;        /* 7.9:1 */
    --line: #26324A;
    --field-line: #7A8AA3;    /* 4.7:1 */
    --accent: #60A5FA;        /* with dark text 6.9:1 */
    --on-accent: #0B1220;
    --accent-soft: #16294A;
    --accent-text: #93C5FD;
    --ok: #34D399;  --ok-soft: #0F2E25;
    --warn: #FBBF24; --warn-soft: #2E230B;
    --err: #F87171; --err-soft: #3A1717;
    --bk-bar: #020617;
    --bk-hint: #0F2E25;
    --bk-hint-line: #34D399;
    --bk-hint-text: #D1FAE5;
    --bubble: #1E2A44;
    --chat-bg: #0E1626;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220;
  --surface: #111A2E;
  --surface-2: #17223A;
  --text: #E2E8F0;
  --text-2: #A3B1C6;
  --line: #26324A;
  --field-line: #7A8AA3;
  --accent: #60A5FA;
  --on-accent: #0B1220;
  --accent-soft: #16294A;
  --accent-text: #93C5FD;
  --ok: #34D399;  --ok-soft: #0F2E25;
  --warn: #FBBF24; --warn-soft: #2E230B;
  --err: #F87171; --err-soft: #3A1717;
  --bk-bar: #020617;
  --bk-hint: #0F2E25;
  --bk-hint-line: #34D399;
  --bk-hint-text: #D1FAE5;
  --bubble: #1E2A44;
  --chat-bg: #0E1626;
}