/*
 * Созвон — design tokens (redesign: docs/redesign/DESIGN_SYSTEM.md §3, §5, §10, §11).
 *
 * Raw palette (--c-*) and non-colour tokens live on :root. Everything that depends on the theme is
 * a semantic token set twice: light on :root / [data-theme="light"], dark on [data-theme="dark"].
 * /js/theme-init.js puts data-theme on <html> before the first paint (saved choice under
 * localStorage 'sozvon:theme', else prefers-color-scheme); any element may carry data-theme to
 * switch its own subtree (kit previews, a dark strip). Without a script the system preference
 * still applies (the @media block at the end). Docs: docs/UI_KIT.md.
 */

:root {
  /* ---- Raw palette (prototype values; DESIGN_SYSTEM §3.1, §11.1) ---- */
  --c-ink: #1C2B43;            /* neutral-950: text */
  --c-muted: #626E81;          /* neutral-600: secondary text */
  --c-border: #E1E6EF;         /* neutral-200: dividers */
  --c-border-strong: #828B9B;  /* neutral-400: field borders */
  --c-bg: #F8F9FC;             /* neutral-50: page */
  --c-bg-soft: #EFF2F7;        /* neutral-100: quiet fills */
  --c-white: #FFFFFF;

  --accent-contrast: #FFFFFF;  /* text and icons on accent fills (both themes) */

  --c-danger: #B43945;         /* red-700 */
  --c-danger-hover: #9E2E3A;
  --c-success: #266C5D;
  --c-rec: #EF4444;            /* recording dot (functional, unchanged) */
  --c-speaking: #315BD8;       /* speaking cue: accent, never green (SPEC §16-10) */
  --c-hand: #FDE68A;           /* raised hand (legacy fill; the redesign uses the accent) */

  /* Navy dark set (the call screen and every dark surface) */
  --c-dark-bg: #101722;
  --c-dark-surface: #172130;
  --c-dark-raised: #202D40;
  --c-dark-border: #2C3B51;
  --c-dark-text: #EDF2FF;
  --c-dark-muted: #ABB8CC;
  --c-dark-link: #AFC8FF;
  --c-dark-link-hover: #C9DAFF;

  --c-overlay: rgba(21, 38, 63, 0.9);            /* labels over video: #15263FE6 */
  --c-on-accent-soft: rgba(255, 255, 255, 0.18); /* icon tile on an accent fill */

  /* Avatar identity colours, same order as AVATAR_COLORS in js/shared/avatar.js. They are drawn as
     soft tints (components.css .avatar, js/lib/avatar.js avatarTint()). */
  --avatar-blue: #3B5BDB;
  --avatar-orange: #C2410C;
  --avatar-violet: #6D28D9;
  --avatar-green: #15803D;
  --avatar-magenta: #9D174D;
  --avatar-teal: #0F766E;
  --avatar-amber: #B45309;
  --avatar-cyan: #0E7490;
  --avatar-rose: #BE123C;
  --avatar-lime: #4D7C0F;
  /* The three profile tones (SPEC §16-5): stored colour, tint fill */
  --tone-sky: #3158B8;
  --tone-sky-bg: #E2EBFF;
  --tone-mint: #285E54;
  --tone-mint-bg: #DFF0EB;
  --tone-lilac: #625094;
  --tone-lilac-bg: #EDE6FF;

  /* Illustration surfaces stay light in both themes (SCREENS §2.5) */
  --hero-ink: #20375B;
  --hero-ink-soft: #2A4368;    /* ♿ prototype #334E73 */
  --hero-dot: #325CBE;
  --hero-bg: #B8D2F6;
  --hero-bg-narrow: #A7C8F4;
  --hero-overlay: linear-gradient(100deg, #d0e4ff70, transparent 90%);

  /* ---- Typography (DESIGN_SYSTEM §4) ---- */
  --font-sans: 'Inter Tight', 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --fs-display: clamp(60.8px, 5.6vw, 86.4px);
  --fs-58: 58px;
  --fs-44: 44px;
  --fs-42: 42.4px;
  --fs-40: 40px;
  --fs-36: 36px;
  --fs-34: 34.4px;
  --fs-32: 32px;
  --fs-30: 30.4px;
  --fs-28: 28.8px;
  --fs-27: 27.2px;
  --fs-22: 22.4px;
  --fs-20: 20px;
  --fs-19: 19px;
  --fs-18: 18px;
  --fs-17: 17px;
  --fs-16: 16px;
  --fs-15: 15px;
  --fs-14: 14px;
  --fs-13: 13px;
  --fs-12: 12px;
  --fs-11: 11px;
  --fs-10: 10px;

  --fw-regular: 400;
  --fw-book: 450;
  --fw-medium: 500;
  --fw-ui: 550;
  --fw-semibold: 600;
  --fw-brand: 650;
  --fw-bold: 700;
  --fw-heavy: 800;

  --tracking-display: -0.055em;
  --tracking-section: -0.04em;
  --tracking-title: -0.035em;
  --tracking-dialog: -0.025em;
  --tracking-price: -0.035em;
  --tracking-logo: -0.045em;
  --tracking-eyebrow: 0.1em;
  --tracking-caps: 0.08em;

  /* ---- Radii (DESIGN_SYSTEM §5.2) ---- */
  --r-6: 6px;
  --r-7: 7px;
  --r-8: 8px;
  --r-9: 9px;
  --r-10: 10px;
  --r-11: 11px;
  --r-12: 12px;
  --r-13: 13px;
  --r-14: 14px;
  --r-15: 15px;
  --r-16: 16px;
  --r-18: 18px;
  --r-20: 20px;
  --r-24: 24px;
  --r-25: 25px;
  --r-28: 28px;
  --r-pill: 999px;

  /* ---- Shadows that do not change with the theme ---- */
  --shadow-hero: 0 30px 60px rgba(21, 24, 29, 0.18);
  --shadow-pip: 0 8px 24px rgba(16, 23, 34, 0.35);
  --shadow-dialog: 0 25px 100px #11244530;
  --shadow-popover: 0 14px 48px #11244528;
  --shadow-notice: 0 4px 14px #1124450c;
  --shadow-pill: inset 0 1px 0 #ffffff7a, 0 3px 12px #31578806;
  --shadow-segment: 0 2px 5px #1b2d5010;
  --shadow-close-sm: 0 2px 8px #15263f10;
  --shadow-card-hover: 0 8px 24px #11244514;

  /* ---- Spacing (4 px grid for page CSS; components use the prototype's exact values) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-20: 80px;
  --sp-22: 88px;
  --sp-24: 96px;

  /* ---- Layout: the prototype's .page-width (1440 wide, 44 / 28 / 20 / 14 px gutters) ---- */
  --container-max: 1440px;
  --gutter: 44px;
  --header-h: 68px;

  /* ---- Motion (DESIGN_SYSTEM §10.1) ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-glide: cubic-bezier(0.22, 0.75, 0.2, 1);
  --ease-modal: cubic-bezier(0.16, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 180ms;
  --dur-slow: 260ms;
  --dur-enter: 250ms;
  --dur-popover: 200ms;
  --dur-switch: 320ms;
  --dur-view: 420ms;

  /* ---- Layers (native <dialog> modals use the top layer and sit above all of these) ---- */
  --z-sticky: 10;
  --z-header: 20;
  --z-drawer: 40;
  --z-overlay: 60;
  --z-toast: 90;
  --z-popup: 100;

  /* Toast regions can be moved from page CSS (e.g. above the call controls). Inside an open modal
     they sit at --toast-offset whatever the page sets. */
  --toast-offset: 24px;
  --toast-offset-bottom: var(--toast-offset);
  --toast-offset-top: var(--toast-offset);
}

/* Breakpoints (CSS cannot read variables in media queries; components.css repeats them):
   wide ≥ 1440 · desktop ≤ 1050 · tablet ≤ 850 · stack ≤ 760 · phone ≤ 650 · xs ≤ 360.
   The call screen keeps its own 640 / 900. */
@media (max-width: 1050px) {
  :root {
    --gutter: 28px;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --header-h: 62px;
  }
}

@media (max-width: 639.98px) {
  :root {
    --toast-offset: 16px;
  }
}

@media (max-width: 360px) {
  :root {
    --gutter: 14px;
  }
}

/* ---- Semantic tokens: light (default) — DESIGN_SYSTEM §11.2 ---- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --accent: #315BD8;
  --accent-hover: #264ABE;
  --accent-pressed: #213F9F;

  --surface: #F8F9FC;           /* page background */
  --surface-soft: #EFF2F7;      /* quiet fills: chips, wheels, hover */
  --surface-raised: #FFFFFF;    /* cards, panels, dialogs, popovers, menus */
  --surface-accent: #EAF0FF;    /* soft accent fills: emblems, selected day, agenda */
  --text: #1C2B43;
  --text-muted: #626E81;
  --text-on-accent: #FFFFFF;
  --accent-text: #315BD8;       /* accent-coloured text and icons on surfaces */
  --accent-text-hover: #264ABE;
  --border: #E1E6EF;            /* dividers, outline buttons, chips */
  --border-strong: #828B9B;     /* field borders only */
  --control-bg: #EFF2F7;
  --control-bg-active: #E1E6EF;
  --control-text: #1C2B43;
  --focus-ring: #254BC1;
  --focus-glow: #315BD825;
  --link: #315BD8;
  --link-hover: #264ABE;

  --input-bg: #F8F9FC;
  --hover-bg: #EFF2F7;
  --secondary-bg: #FFFFFF;
  --selected-bg: #FFFFFF;
  --neutral-bg: #EFF2F7;
  --neutral-text: #1C2B43;
  --danger: #B43945;            /* danger fills (white text 5.81:1) */
  --danger-hover: #9E2E3A;
  --danger-text: #B43945;       /* danger text and icons */
  --danger-soft: rgba(180, 57, 69, 0.10);
  --danger-soft-solid: #FBE9EB;
  --danger-glow: rgba(180, 57, 69, 0.18);
  --success: #266C5D;
  --success-soft: #E3F3EE;
  --warning: #8A5A00;
  --warning-soft: #FDF0D5;
  --toast-bg: #1C2B43;
  --toast-text: #F8F9FC;
  --toast-hover: rgba(255, 255, 255, 0.12);
  --tooltip-bg: #1C2B43;
  --tooltip-text: #F8F9FC;
  --skeleton-bg: #E1E6EF;
  --scrollbar-thumb: #828B9B;
  --selection: #CBDCFF;
  --selection-text: #1C2B43;
  --avatar-ring: #FFFFFF;
  --backdrop: rgba(18, 33, 55, 0.45);
  --speaking-ring: #315BD8;
  --tab-indicator: #315BD8;
  --past-day: #626E81;
  --card-border: transparent;   /* panels need no border on the light page */
  --btn-dark-hover: #2A3B57;

  --shadow-overlay: 0 14px 48px #11244528;
  --shadow-modal: 0 25px 100px #11244530;
  --shadow-toast: 0 5px 30px #17294420;

  /* Glass panel and glass controls (DESIGN_SYSTEM §3.3) */
  --glass-bg: linear-gradient(115deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.5));
  --glass-bg-solid: rgba(255, 255, 255, 0.9);
  --glass-bg-narrow: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-border-narrow: #ffffff99;
  --glass-shadow: inset 0 1px 0 #ffffff70, 0 12px 36px #36578205;
  --glass-blur: blur(5px) saturate(0.95);
  --glass-opaque: #F8FAFF;
  --glass-text-muted: #334A6B;
  --glass-input-border: #718098;
  --glass-input-bg: rgba(248, 250, 255, 0.86);
  --glass-accent-text: #254BC1;
  --glass-pill-bg: rgba(255, 255, 255, 0.4);
  --glass-pill-bg-hover: #ffffff85;
  --glass-pill-border: #ffffffa6;
  --glass-pill-shadow: inset 0 1px 0 #ffffff7a, 0 3px 12px #31578806;
  --glass-symbol-bg: #f2f6ffba;
  --glass-symbol-ring: #ffffff80;
  --glass-symbol-ink: #3E6191;

  /* Page backgrounds (DESIGN_SYSTEM §6.1) */
  --sky-glow-a: #d9e6ff70;
  --sky-glow-b: #d9eaff80;
  --calm-glow: #e2edff66;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626E81' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- Semantic tokens: dark (navy) ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --accent: #436BE3;
  --accent-hover: #3A5FD6;      /* ♿ prototype #537BEB (white 3.89:1) */
  --accent-pressed: #3252C4;

  --surface: #101722;
  --surface-soft: #202D40;
  --surface-raised: #172130;
  --surface-accent: #253755;
  --text: #EDF2FF;
  --text-muted: #ABB8CC;
  --text-on-accent: #FFFFFF;
  --accent-text: #AFC8FF;       /* ♿ prototype #436BE3 as text (3.43:1) */
  --accent-text-hover: #C9DAFF;
  --border: #2C3B51;
  --border-strong: #6C7D96;
  --control-bg: #202D40;
  --control-bg-active: #2C3B51;
  --control-text: #EDF2FF;
  --focus-ring: #9ABAFF;
  --focus-glow: #9ABAFF30;
  --link: #AFC8FF;
  --link-hover: #C9DAFF;

  --input-bg: #101722;
  --hover-bg: #202D40;
  --secondary-bg: #172130;
  --selected-bg: #172130;
  --neutral-bg: #202D40;
  --neutral-text: #EDF2FF;
  --danger: #B43945;
  --danger-hover: #9E2E3A;
  --danger-text: #FFA3AB;
  --danger-soft: rgba(255, 163, 171, 0.10);
  --danger-soft-solid: #3D2228;
  --danger-glow: rgba(255, 163, 171, 0.25);
  --success: #89CBB5;
  --success-soft: #1D3A35;
  --warning: #F2C46D;
  --warning-soft: #3A2F17;
  --toast-bg: #EDF2FF;
  --toast-text: #101722;
  --toast-hover: rgba(16, 23, 34, 0.08);
  --tooltip-bg: #EDF2FF;
  --tooltip-text: #101722;
  --skeleton-bg: #202D40;
  --scrollbar-thumb: #2C3B51;
  --selection: #CBDCFF;
  --selection-text: #1C2B43;
  --avatar-ring: #172130;
  --speaking-ring: #9ABAFF;
  --tab-indicator: #AFC8FF;     /* ♿ the accent fill is 2.32:1 on the dark glass */
  --past-day: #8592A7;          /* ♿ prototype #ABB8CC at 45 % */
  --card-border: #2C3B51;       /* panels get a 1 px border on navy */
  --btn-dark-hover: #FFFFFF;

  --shadow-overlay: 0 14px 48px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 25px 100px #11244530;
  --shadow-toast: 0 5px 30px #17294420;

  --glass-bg: rgba(19, 29, 45, 0.77);
  --glass-bg-solid: rgba(19, 29, 45, 0.77);
  --glass-bg-narrow: rgba(19, 29, 45, 0.77);
  --glass-border: #ccdfff1c;
  --glass-border-narrow: #ccdfff1c;
  --glass-shadow: inset 0 1px 0 #e0ecff0c, 0 12px 36px #1020370a;
  --glass-opaque: #172130;
  --glass-text-muted: #D3DEF0;
  --glass-input-border: #6C7D96;
  --glass-input-bg: rgba(16, 23, 34, 0.88);
  --glass-accent-text: #AFC8FF;
  --glass-pill-bg: #d0e2ff0d;
  --glass-pill-bg-hover: #d0e2ff1c;
  --glass-pill-border: #d0e2ff24;
  --glass-pill-shadow: inset 0 1px 0 #d0e2ff0a;
  --glass-symbol-bg: #d0e2ff12;
  --glass-symbol-ring: #d0e2ff0c;
  --glass-symbol-ink: #B5CEF2;

  --sky-glow-a: #254e8b25;
  --sky-glow-b: #30588620;
  --calm-glow: #29416c30;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABB8CC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
}

/* No script (or before /js/theme-init.js on a page that forgot it): follow the system. The block
   repeats the dark set for the root only; data-theme on <html> always wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --accent: #436BE3;
    --accent-hover: #3A5FD6;
    --accent-pressed: #3252C4;
    --surface: #101722;
    --surface-soft: #202D40;
    --surface-raised: #172130;
    --surface-accent: #253755;
    --text: #EDF2FF;
    --text-muted: #ABB8CC;
    --accent-text: #AFC8FF;
    --accent-text-hover: #C9DAFF;
    --border: #2C3B51;
    --border-strong: #6C7D96;
    --control-bg: #202D40;
    --control-bg-active: #2C3B51;
    --control-text: #EDF2FF;
    --focus-ring: #9ABAFF;
    --focus-glow: #9ABAFF30;
    --link: #AFC8FF;
    --link-hover: #C9DAFF;
    --input-bg: #101722;
    --hover-bg: #202D40;
    --secondary-bg: #172130;
    --selected-bg: #172130;
    --neutral-bg: #202D40;
    --neutral-text: #EDF2FF;
    --danger-text: #FFA3AB;
    --danger-soft: rgba(255, 163, 171, 0.10);
    --danger-soft-solid: #3D2228;
    --danger-glow: rgba(255, 163, 171, 0.25);
    --success: #89CBB5;
    --success-soft: #1D3A35;
    --warning: #F2C46D;
    --warning-soft: #3A2F17;
    --toast-bg: #EDF2FF;
    --toast-text: #101722;
    --toast-hover: rgba(16, 23, 34, 0.08);
    --tooltip-bg: #EDF2FF;
    --tooltip-text: #101722;
    --skeleton-bg: #202D40;
    --scrollbar-thumb: #2C3B51;
    --avatar-ring: #172130;
    --speaking-ring: #9ABAFF;
    --tab-indicator: #AFC8FF;
    --past-day: #8592A7;
    --card-border: #2C3B51;
    --btn-dark-hover: #FFFFFF;
    --shadow-overlay: 0 14px 48px rgba(0, 0, 0, 0.45);
    --glass-bg: rgba(19, 29, 45, 0.77);
    --glass-bg-solid: rgba(19, 29, 45, 0.77);
    --glass-bg-narrow: rgba(19, 29, 45, 0.77);
    --glass-border: #ccdfff1c;
    --glass-border-narrow: #ccdfff1c;
    --glass-shadow: inset 0 1px 0 #e0ecff0c, 0 12px 36px #1020370a;
    --glass-opaque: #172130;
    --glass-text-muted: #D3DEF0;
    --glass-input-border: #6C7D96;
    --glass-input-bg: rgba(16, 23, 34, 0.88);
    --glass-accent-text: #AFC8FF;
    --glass-pill-bg: #d0e2ff0d;
    --glass-pill-bg-hover: #d0e2ff1c;
    --glass-pill-border: #d0e2ff24;
    --glass-pill-shadow: inset 0 1px 0 #d0e2ff0a;
    --glass-symbol-bg: #d0e2ff12;
    --glass-symbol-ring: #d0e2ff0c;
    --glass-symbol-ink: #B5CEF2;
    --sky-glow-a: #254e8b25;
    --sky-glow-b: #30588620;
    --calm-glow: #29416c30;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABB8CC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  }
}