/* Токены концепта. Единственное место со значениями цвета, размера, отступа, шрифта.
   Источник цветов: SPEC/PROTOTYPE.md. Отклонения от SPEC (по контрасту AA) помечены "AA". */

:root {
  color-scheme: light;

  /* Поверхности */
  --c-bg: #F1F2F7;
  --c-surface: #FFFFFF;
  --c-border: #E2E2E2;
  --c-border-ui: #7E8087;      /* границы полей и контролов, не менее 3:1 */

  /* Текст */
  --c-text: #18181B;
  --c-text-2: #5C5E66;         /* AA: в SPEC #868686 (3.2:1), здесь темнее */
  --c-hint: #B7B7B7;           /* только декор, текстом не использовать */

  /* Бренд */
  --c-primary: #6C59F5;        /* заливки, кнопки */
  --c-on-primary: #FFFFFF;
  --c-primary-text: #5846E0;   /* AA: фиолетовый текст и ссылки на любом фоне */
  --c-primary-soft: #E1DDFF;
  --c-link: #0055FF;

  /* Акцент и статусы. *-text для текста, остальное для заливок и значков */
  --c-accent: #FAB815;
  --c-on-accent: #18181B;
  --c-coin: #FCC929;
  --c-warn: #EC4845;
  --c-warn-text: #C62F2C;      /* AA */
  --c-overdue: #F75325;
  --c-success: #4ED574;
  --c-success-text: #1B7338;   /* AA */

  /* Заливки плиток */
  --c-tile-lavender: #E1DDFF;
  --c-tile-sky: #C0E3FE;
  --c-tile-green: #DFF7CD;
  --c-tile-peach: #FFDEC9;
  --c-tile-yellow: #FFF2BF;

  --c-focus: #4A38D6;
  --c-overlay: rgb(24 24 27 / 0.5);
  --c-highlight: #EC4845;      /* подсветка места на кадре "как сейчас" */

  /* Флаги (рисунок, одинаковы в обеих темах) */
  --flag-white: #FFFFFF;
  --flag-black: #000000;
  --flag-ua-blue: #0057B7;
  --flag-ua-yellow: #FFD700;
  --flag-red: #D7141A;
  --flag-de-gold: #FFCE00;
  --flag-cz-blue: #11457E;
  --flag-lt-yellow: #FDB913;
  --flag-lt-green: #006A44;

  /* Отступы, шаг 4 */
  --z-language: 50;
  --language-width: 12rem;
  --shadow-language: 0 8px 24px rgb(0 0 0 / 0.18);
  --desktop-control: 2.5rem;
  --desktop-side: 15rem;
  --desktop-title: 1.75rem;
  --desktop-heading: 1.25rem;
  --desktop-icon: 1.125rem;
  --calendar-cell-height: 3.25rem;
  --calendar-marker: 0.375rem;
  --attendance-number: 1.5rem;
  --attendance-chart-height: 16.5rem;
  --attendance-date-width: 6rem;
  --attendance-bar-height: 0.875rem;
  --chart-height: 10rem;
  --profile-name-size: 1.25rem;
  --app-copy-size: 0.9375rem;
  --app-card-pad: 1.125rem;
  --award-copy-height: 5.25rem;
  --chart-grid-dash: 3 5;
  --chart-stroke: 3px;
  --form-label-height: 1.5rem;
  --choice-max: 16rem;
  --choice-min: 9rem;
  --z-choice: 60;
  --chart-table-height: 12rem;
  --chart-table-min: 24rem;
  --journal-min: 15rem;
  --calendar-popup-w: 20rem;
  --legend-mark-w: 1.25rem;
  --flag-sk-blue: #0B4EA2;
  --border-w: 1px;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Радиусы */
  --r-1: 10px;
  --r-2: 16px;
  --r-3: 24px;
  --r-pill: 999px;

  /* Шрифт */
  --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-semi: 600;
  --fw-bold: 700;
  --fs-xs: 0.875rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-3xl: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --lh-tight: 1.2;
  --lh-body: 1.5;

  /* Размеры */
  --touch: 2.75rem;            /* 44 px, минимальная цель касания */
  --icon: 1.25rem;
  --icon-stroke: 1.75;
  --container: 88rem;
  --measure: 40rem;
  --focus-width: 3px;
  --focus-offset: 2px;
  --frame-pc-w: 1280px;
  --frame-pc-h: 800px;
  --frame-phone-w: 390px;
  --frame-phone-h: 844px;
  --side-w: 17rem;
  --field-min: 12rem;
  --preview-size: 5.5rem;
  --product-icon: 3rem;
  --status-strip: 3px;
  --trend-label-w: 7rem;
  --agenda-time-w: 8rem;
  --tabbar-h: 4rem;
  --sheet-w: 22rem;
  --tile-min: 16rem;
  --tile-h: 14rem;
  --bar-h: 0.5rem;
  --dot: 0.5rem;

  /* Тени и движение */
  --shadow-1: 0 1px 2px rgb(24 24 27 / 0.06), 0 2px 8px rgb(24 24 27 / 0.06);
  --shadow-2: 0 8px 32px rgb(24 24 27 / 0.16);
  --dur: 150ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #14141C;
  --c-surface: #1E1E2A;
  --c-border: #2E2E40;
  --c-border-ui: #7C7C96;

  --c-text: #ECECF4;
  --c-text-2: #B6B6C9;
  --c-hint: #5A5A70;

  --c-primary: #8A7CFF;
  --c-on-primary: #14141C;     /* тёмный текст на светлом фиолетовом: 5.5:1, белый дал бы 3.4:1 */
  --c-primary-text: #A99FFF;
  --c-primary-soft: #2A2650;
  --c-link: #7FA8FF;

  --c-accent: #FAB815;
  --c-on-accent: #18181B;
  --c-coin: #FCC929;
  --c-warn: #FF6B67;
  --c-warn-text: #FF8A86;
  --c-overdue: #FF7A55;
  --c-success: #4ED574;
  --c-success-text: #4ED574;

  --c-tile-lavender: #2A2650;
  --c-tile-sky: #17314A;
  --c-tile-green: #1D3A2A;
  --c-tile-peach: #4A2E22;
  --c-tile-yellow: #3F3614;

  --c-focus: #B6AEFF;
  --c-overlay: rgb(0 0 0 / 0.6);
  --c-highlight: #FF6B67;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 8px 32px rgb(0 0 0 / 0.5);
}