/* Marine Health — design tokens v1.1
   ─────────────────────────────────────────────────────────────────────
   Полная спецификация для разработки:
   • Brand colors        (marine palette из брендбука)
   • Semantic colors     (text, bg, status, border, accent)
   • Spacing scale       (4px grid: 2 / 4 / 6 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64)
   • Radii               (4px grid)
   • Elevation           (5 уровней shadow)
   • Motion              (durations + easing)
   • Z-index scale       (layer order)
   • Typography          (display / title / body / caption / mono)
   • Dark theme          (полный набор переопределений)
   ───────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ═══════════════════════════════════════════════════════════════
     1. BRAND — из marketing 03-visual-concept.md
     ═══════════════════════════════════════════════════════════════ */
  --marine-black:   #0F1B2D;
  --marine-indigo:  #1E40AF;
  --sea-mist:       #F0F4F8;
  --sea-wave:       #10B981;
  --sea-foam:       #A7F3D0;
  --soft-sand:      #FEF3C7;
  --beige-calm:     #F5F1E8;

  /* ═══════════════════════════════════════════════════════════════
     2. SEMANTIC — used everywhere instead of brand directly
     ═══════════════════════════════════════════════════════════════ */
  /* Backgrounds */
  --bg-primary:   #FFFFFF;
  --bg-card:      #FFFFFF;
  --bg-subtle:    var(--sea-mist);
  --bg-warm:      var(--beige-calm);
  --bg-overlay:   rgba(15, 27, 45, 0.48);
  --bg-scrim:     rgba(15, 27, 45, 0.16);

  /* Accent */
  --accent:       var(--marine-indigo);
  --accent-soft:  #DBE5F8;
  --accent-deep:  #1A347D;
  --accent-on:    #FFFFFF;

  /* Status — medical signals (4 уровня) */
  --status-green:    #10B981;
  --status-green-bg: #D1FAE5;
  --status-amber:    #F59E0B;
  --status-amber-bg: #FEF3C7;
  --status-coral:    #EF4444;
  --status-coral-bg: #FEE2E2;
  --status-no-data:  #9A9A93;
  --status-no-data-bg: #F1F2F4;

  /* Text */
  --text-primary:    var(--marine-black);
  --text-secondary:  #5A6470;
  --text-tertiary:   #7B8694;
  --text-muted:      #98A0AA;
  --text-on-accent:  #FFFFFF;
  --text-disabled:   #C4C9D1;

  /* Lines */
  --divider: #ECEEF2;
  --border:  #E0E3E8;
  --border-strong: #C4C9D1;
  --border-focus: var(--accent);

  /* Interactive states */
  --state-hover:    rgba(15, 27, 45, 0.04);
  --state-pressed:  rgba(15, 27, 45, 0.08);
  --state-selected: var(--accent-soft);

  /* ═══════════════════════════════════════════════════════════════
     3. SPACING — 4px grid
     ═══════════════════════════════════════════════════════════════ */
  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Component-level (semantic spacing) */
  --gutter-screen: var(--space-16); /* боковой padding экрана */
  --gap-list:      var(--space-12); /* между элементами списка */
  --gap-section:   var(--space-24); /* между секциями */
  --gap-stack:     var(--space-8);  /* между плотно стоящими */

  /* ═══════════════════════════════════════════════════════════════
     4. RADII
     ═══════════════════════════════════════════════════════════════ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;  /* default card */
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Aliases (legacy + semantic) */
  --r-card: var(--radius-md);
  --r-pill: var(--radius-full);
  --r-chip: var(--radius-lg);

  /* ═══════════════════════════════════════════════════════════════
     5. ELEVATION — 5 уровней shadow
     ═══════════════════════════════════════════════════════════════ */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(15, 27, 45, 0.04);
  --shadow-2: 0 1px 3px rgba(15, 27, 45, 0.06), 0 1px 2px rgba(15, 27, 45, 0.03);
  --shadow-3: 0 4px 12px rgba(15, 27, 45, 0.08), 0 1px 3px rgba(15, 27, 45, 0.04);
  --shadow-4: 0 8px 24px rgba(15, 27, 45, 0.10), 0 2px 6px rgba(15, 27, 45, 0.04);
  --shadow-5: 0 16px 48px rgba(15, 27, 45, 0.16), 0 4px 12px rgba(15, 27, 45, 0.08);

  /* Aliases */
  --shadow-card: var(--shadow-1);
  --shadow-elev: var(--shadow-3);
  --shadow-sheet: var(--shadow-4);
  --shadow-dialog: var(--shadow-5);

  /* Focus ring */
  --shadow-focus: 0 0 0 3px rgba(30, 64, 175, 0.20);

  /* ═══════════════════════════════════════════════════════════════
     6. MOTION
     ═══════════════════════════════════════════════════════════════ */
  --duration-instant: 0ms;
  --duration-fast:    150ms;
  --duration-base:    240ms;
  --duration-slow:    320ms;
  --duration-slower:  480ms;

  --ease-linear:  linear;
  --ease-out:     cubic-bezier(0.2, 0, 0, 1);          /* iOS-style decel */
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);   /* для FAB / sheet */

  /* Semantic transitions */
  --transition-press:   transform var(--duration-fast) var(--ease-out);
  --transition-hover:   background-color var(--duration-fast) var(--ease-out);
  --transition-screen:  transform var(--duration-slow) var(--ease-out);
  --transition-fade:    opacity var(--duration-base) var(--ease-in-out);

  /* ═══════════════════════════════════════════════════════════════
     7. Z-INDEX SCALE
     ═══════════════════════════════════════════════════════════════ */
  --z-base:    0;
  --z-content: 1;
  --z-sticky:  10;
  --z-tabbar:  100;
  --z-header:  110;
  --z-sheet:   200;
  --z-dialog:  300;
  --z-toast:   400;
  --z-tooltip: 500;
  --z-debug:   9999;

  /* ═══════════════════════════════════════════════════════════════
     8. TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════ */
  --font-display: -apple-system, 'SF Pro Display', 'Manrope', system-ui, sans-serif;
  --font-body:    -apple-system, 'SF Pro Text', 'Manrope', system-ui, sans-serif;
  --font-serif:   'PT Serif', Georgia, serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Type scale — name / size / line-height / weight / letter-spacing */
  --type-display-1: 600 56px/64px var(--font-display);
  --type-display-2: 600 40px/48px var(--font-display);
  --type-title-1:   600 32px/40px var(--font-display);
  --type-title-2:   600 24px/32px var(--font-display);
  --type-title-3:   600 20px/28px var(--font-display);
  --type-title-4:   600 17px/24px var(--font-display);
  --type-body-1:    400 17px/24px var(--font-body);
  --type-body-1-strong: 600 17px/24px var(--font-body);
  --type-body-2:    400 15px/22px var(--font-body);
  --type-body-2-strong: 600 15px/22px var(--font-body);
  --type-caption-1: 500 13px/18px var(--font-body);
  --type-caption-2: 500 11px/14px var(--font-body);

  /* Letter spacing per scale */
  --tracking-display: -0.02em;
  --tracking-title:   -0.01em;
  --tracking-body:    0;
  --tracking-caption: 0.01em;
  --tracking-caption-tight: 0.02em;

  /* ═══════════════════════════════════════════════════════════════
     9. LAYOUT — safe areas, hit-targets
     ═══════════════════════════════════════════════════════════════ */
  --safe-top:    44px;  /* iOS notch (iPhone 14 = 47, 14 Pro = 59 — берём 44 как минимум) */
  --safe-bottom: 34px;  /* home indicator */
  --tabbar-h:    49px;
  --navbar-h:    44px;
  --hit-min:     44px;  /* минимальный target для accessibility */
}

/* ─────────────────────────────────────────────────────────────────────
   DARK THEME — полный набор переопределений
   Активируется через [data-theme="dark"] на любом предке.
   ───────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary:   #0A0F1A;
  --bg-card:      #131A28;
  --bg-subtle:    #1A2233;
  --bg-warm:      #1F1B14;
  --bg-overlay:   rgba(0, 0, 0, 0.64);
  --bg-scrim:     rgba(0, 0, 0, 0.32);

  /* Accent — поднимаем светлоту чтобы хватало контраста на тёмном */
  --accent:       #6B8FE8;
  --accent-soft:  #1F2A4A;
  --accent-deep:  #94B0F0;
  --accent-on:    #0A0F1A;

  /* Status — bg-варианты темнее, но цвет почти тот же (узнаваемость) */
  --status-green:    #34D399;
  --status-green-bg: #0F2E22;
  --status-amber:    #FBBF24;
  --status-amber-bg: #2E2410;
  --status-coral:    #F87171;
  --status-coral-bg: #2E1416;
  --status-no-data:  #6B7280;
  --status-no-data-bg: #1A1F2A;

  /* Text */
  --text-primary:   #F1F4F8;
  --text-secondary: #B0B7C2;
  --text-tertiary:  #8A92A0;
  --text-muted:     #6B7280;
  --text-on-accent: #0A0F1A;
  --text-disabled:  #4B5563;

  /* Lines */
  --divider: #1F2937;
  --border:  #2A3441;
  --border-strong: #3D4858;

  /* Interactive states */
  --state-hover:    rgba(255, 255, 255, 0.04);
  --state-pressed:  rgba(255, 255, 255, 0.08);
  --state-selected: var(--accent-soft);

  /* Elevation — на тёмном тенью почти не видно, добавляем подсветку border */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.48), 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.56), 0 2px 6px rgba(0, 0, 0, 0.32);
  --shadow-5: 0 16px 48px rgba(0, 0, 0, 0.64), 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-focus: 0 0 0 3px rgba(107, 143, 232, 0.32);
}

/* Системная тёмная тема, если не задана вручную */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg-primary:   #0A0F1A;
    --bg-card:      #131A28;
    --bg-subtle:    #1A2233;
    --bg-warm:      #1F1B14;
    --accent:       #6B8FE8;
    --accent-soft:  #1F2A4A;
    --text-primary: #F1F4F8;
    --text-secondary: #B0B7C2;
    --text-tertiary:  #8A92A0;
    --divider: #1F2937;
    --border:  #2A3441;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL RESETS
   ───────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduced motion — система просит уменьшить анимации */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   1ms;
    --duration-base:   1ms;
    --duration-slow:   1ms;
    --duration-slower: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); letter-spacing: var(--tracking-display); }
.font-serif   { font-family: var(--font-serif); }
.font-mono    { font-family: var(--font-mono); }
.tabular      { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum', 'lnum'; }

/* Visually hidden (accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}