/* ============================================================
   Atlas Design System — Colors & Type tokens
   Operational design system for ВровеньПол (semi-dry floor screed)
   ------------------------------------------------------------
   Two-language palette:
     1) Action Blue (#0066cc) — single interactive cue.
     2) iOS system colors — reserved for pipeline status + map.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----- Brand & Accent ----- */
  --primary:           #0066cc;            /* Action Blue — every interactive cue */
  --primary-focus:     #0071e3;            /* Focus ring, primary hover */
  --primary-on-dark:   #2997ff;            /* Inline links on dark surfaces */
  --primary-tint:      rgba(0,102,204,.08);/* Selected fill (sidebar, list, radio) */

  /* ----- Ink (text) ----- */
  --ink:               #1d1d1f;            /* Default body / headline ink */
  --ink-muted-80:      #333333;            /* Body on parchment, secondary callouts */
  --ink-muted-48:      #7a7a7a;            /* Eyebrows, captions, disabled text */
  --body-on-dark:      #ffffff;            /* Text on global nav / dark surfaces */
  --body-muted:        #cccccc;            /* Subtle text on dark */

  /* ----- Surface ----- */
  --canvas:            #ffffff;            /* Default canvas */
  --canvas-parchment:  #f5f5f7;            /* Inset surface (search, page bg) */
  --surface-pearl:     #fafafc;            /* Ghost button surface */
  --surface-tile-1:    #272729;            /* Dark marketing tiles */
  --surface-tile-2:    #2a2a2c;
  --surface-tile-3:    #252527;
  --surface-black:     #000000;            /* Reserved for global nav only */
  --surface-frosted-light: rgba(255,255,255,.92); /* Map overlays, mobile bottom-nav */
  --surface-chip:      rgba(210,210,215,.64);     /* Chips inside map balloon */

  /* ----- Hairlines ----- */
  --hairline:          #e0e0e0;            /* 1px line — drawer/modal/input */
  --divider-soft:      #f0f0f0;            /* 1px row divider */

  /* ----- Inverse surface (для tooltip, выбранного дня календаря, бренд-маркера и т.п.) -----
     В светлой теме — темная подложка, светлый текст.
     В темной теме — переключается на светлую подложку с темным текстом (см. ниже). */
  --inverse-surface:   #1d1d1f;
  --inverse-ink:       #ffffff;

  /* ----- Pipeline status (iOS system palette — RESERVED) ----- */
  --status-blue:       #007AFF;  --status-blue-tint:    rgba(0,122,255,.14);   --status-blue-on-tint:    #0050B5;
  --status-green:      #34C759;  --status-green-tint:   rgba(52,199,89,.16);   --status-green-on-tint:   #1F8B3D;
  --status-orange:     #FF9500;  --status-orange-tint:  rgba(255,149,0,.14);   --status-orange-on-tint:  #B86E00;
  --status-red:        #FF3B30;  --status-red-tint:     rgba(255,59,48,.14);   --status-red-on-tint:     #B92019;
  --status-purple:     #AF52DE;  --status-purple-tint:  rgba(175,82,222,.14);  --status-purple-on-tint:  #7E3BAE;
  --status-yellow:     #FFCC00;  --status-yellow-tint:  rgba(255,204,0,.22);   --status-yellow-on-tint:  #8A6A00;

  /* ----- User identity (RESERVED for measurers; never overlap with status) ----- */
  --user-color-1:      #0066cc;            /* primary measurer (matches Action Blue) */
  --user-color-2:      #34C759;
  --user-color-3:      #5856D6;            /* iOS indigo */
  --user-color-4:      #AF52DE;

  /* ----- Radii ----- */
  --r-none: 0px;
  --r-xs:   5px;
  --r-sm:   8px;
  --r-md:   11px;
  --r-lg:   18px;
  --r-pill: 9999px;
  --r-full: 9999px;

  /* ----- Spacing (8-base) ----- */
  --space-xxs:     4px;
  --space-xs:      8px;
  --space-sm:      12px;
  --space-md:      17px;
  --space-lg:      24px;
  --space-xl:      32px;
  --space-xxl:     48px;
  --space-section: 80px;

  /* ----- Motion ----- */
  --motion-fast:    120ms;
  --motion-medium:  200ms;
  --motion-slow:    280ms;
  --ease-system:    cubic-bezier(.32,.72,.16,1);

  /* ----- The single elevation primitive permitted on chrome ----- */
  --focus-ring:    0 0 0 3px rgba(0,113,227,.15);
  --shadow-marker: 0 2px 3px rgba(0,0,0,.30);   /* map markers ONLY */
  --shadow-product: 3px 5px 30px 0 rgba(0,0,0,.22); /* photography ONLY */

  /* ----- Type families ----- */
  --font-display: "SF Pro Display", "SF Pro Text", system-ui, -apple-system,
                  BlinkMacSystemFont, "Helvetica Neue", "Inter", Arial, sans-serif;
  --font-body:    "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", "Inter", Arial, sans-serif;
  --font-mono:    "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ============================================================
   ТЕМНАЯ ТЕМА — переопределение цветовых токенов.
   Активируется одним из двух способов:
     1) Явно: <html data-theme="dark">   — выбран пользователем.
     2) Авто: prefers-color-scheme: dark — следует за системой,
        кроме случая, когда явно выбрана светлая (data-theme="light").
   Логика выбора темы — в inline-скрипте index.html (до загрузки CSS).
============================================================ */
:root[data-theme="dark"] {
  /* Brand: чуть осветленный синий для лучшего контраста на темном */
  --primary:           #2997ff;
  --primary-focus:     #4ba9ff;
  --primary-on-dark:   #2997ff;
  --primary-tint:      rgba(41,151,255,.16);

  /* Ink (текст инвертирован) */
  --ink:               #f5f5f7;
  --ink-muted-80:      #d1d1d6;
  --ink-muted-48:      #8e8e93;
  --body-on-dark:      #ffffff;
  --body-muted:        #8e8e93;

  /* Surface — графитовая палитра (elevated, без резкого черного).
     Фон страницы темнее карточек — правильная иерархия глубины. */
  --canvas:            #2c2c2e;            /* Карточки — приподнятый графит */
  --canvas-parchment:  #1c1c1e;            /* Фон страницы — глубокий графит */
  --surface-pearl:     #3a3a3c;            /* 3-й уровень (модалки и т.п.) */
  --surface-tile-1:    #2c2c2e;
  --surface-tile-2:    #3a3a3c;
  --surface-tile-3:    #2c2c2e;
  --surface-frosted-light: rgba(28,28,30,.85);
  --surface-chip:      rgba(58,58,60,.72);

  /* Hairlines — мягкий контраст между уровнями */
  --hairline:          #38383a;
  --divider-soft:      #2c2c2e;

  /* Inverse surface в темной теме — светлый «надлеж» с темным текстом.
     Используется в tooltip графика, выбранном дне календаря и т.п. */
  --inverse-surface:   #f5f5f7;
  --inverse-ink:       #1c1c1e;

  /* Status tints — увеличиваем непрозрачность для читаемости на темном фоне */
  --status-blue-tint:    rgba(10,132,255,.22);   --status-blue-on-tint:    #64B5FF;
  --status-green-tint:   rgba(48,209,88,.20);    --status-green-on-tint:   #5ADE7E;
  --status-orange-tint:  rgba(255,159,10,.22);   --status-orange-on-tint:  #FFB454;
  --status-red-tint:     rgba(255,69,58,.22);    --status-red-on-tint:     #FF6961;
  --status-purple-tint:  rgba(191,90,242,.22);   --status-purple-on-tint:  #C77DFA;
  --status-yellow-tint:  rgba(255,214,10,.22);   --status-yellow-on-tint:  #FFD426;

  /* Focus ring чуть ярче на темном */
  --focus-ring:        0 0 0 3px rgba(41,151,255,.30);
}

/* Авто-режим: если пользователь не выставил явно — следуем за системой. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:           #2997ff;
    --primary-focus:     #4ba9ff;
    --primary-on-dark:   #2997ff;
    --primary-tint:      rgba(41,151,255,.16);

    --ink:               #f5f5f7;
    --ink-muted-80:      #d1d1d6;
    --ink-muted-48:      #8e8e93;
    --body-on-dark:      #ffffff;
    --body-muted:        #8e8e93;

    --canvas:            #2c2c2e;
    --canvas-parchment:  #1c1c1e;
    --surface-pearl:     #3a3a3c;
    --surface-tile-1:    #2c2c2e;
    --surface-tile-2:    #3a3a3c;
    --surface-tile-3:    #2c2c2e;
    --surface-frosted-light: rgba(28,28,30,.85);
    --surface-chip:      rgba(58,58,60,.72);

    --hairline:          #38383a;
    --divider-soft:      #2c2c2e;

    --inverse-surface:   #f5f5f7;
    --inverse-ink:       #1c1c1e;

    --status-blue-tint:    rgba(10,132,255,.22);   --status-blue-on-tint:    #64B5FF;
    --status-green-tint:   rgba(48,209,88,.20);    --status-green-on-tint:   #5ADE7E;
    --status-orange-tint:  rgba(255,159,10,.22);   --status-orange-on-tint:  #FFB454;
    --status-red-tint:     rgba(255,69,58,.22);    --status-red-on-tint:     #FF6961;
    --status-purple-tint:  rgba(191,90,242,.22);   --status-purple-on-tint:  #C77DFA;
    --status-yellow-tint:  rgba(255,214,10,.22);   --status-yellow-on-tint:  #FFD426;

    --focus-ring:        0 0 0 3px rgba(41,151,255,.30);
  }
}

/* ============================================================
   Base + semantic typography classes
   Weight ladder: 300 / 400 / 600 / 700.  500 deliberately absent.
============================================================ */

html, body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss03", "cv11";
}

/* ----- Display + headings ----- */
.t-display-lg  { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.10; letter-spacing: -0.4px; }
.t-display-md  { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.14; letter-spacing: 0.196px; }
.t-tagline     { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }

/* ----- Body ----- */
.t-body-strong    { font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.24; letter-spacing: -0.374px; }
.t-body           { font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; }
.t-body-condensed { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.40; letter-spacing: -0.224px; }

/* ----- Caption + chrome ----- */
.t-caption        { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: -0.224px; }
.t-caption-strong { font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -0.224px; }
.t-data-mono      { font-family: var(--font-mono); font-size: 13px; font-weight: 400; line-height: 1.30; letter-spacing: -0.10px; }
.t-fine           { font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.00; letter-spacing: -0.12px; }
.t-badge          { font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1.20; letter-spacing: -0.12px; }
.t-eyebrow        { font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1.20; letter-spacing: 0.5px; text-transform: uppercase; }
.t-nav-link       { font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.00; letter-spacing: -0.12px; }
.t-nav-tab        { font-family: var(--font-body); font-size: 10px; font-weight: 400; line-height: 1.20; letter-spacing: -0.10px; }

/* ----- Semantic tag mappings ----- */
h1 { font: 600 40px/1.10 var(--font-display); letter-spacing: -0.4px; color: var(--ink); }
h2 { font: 600 28px/1.14 var(--font-display); letter-spacing: 0.196px; color: var(--ink); }
h3 { font: 600 21px/1.19 var(--font-display); letter-spacing: 0.231px; color: var(--ink); }
h4 { font: 600 17px/1.24 var(--font-body);    letter-spacing: -0.374px; color: var(--ink); }
p  { font: 400 17px/1.47 var(--font-body);    letter-spacing: -0.374px; color: var(--ink); }
small  { font: 400 14px/1.43 var(--font-body); letter-spacing: -0.224px; color: var(--ink-muted-48); }
code, kbd, samp { font: 400 13px/1.30 var(--font-mono); letter-spacing: -0.10px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }