/* Family Hub — semantic design tokens (4 themes) */

/* ─── AURORA: светлый wellness, градиентная шапка ─── */
[data-theme="aurora"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;

  --bg-app: #ebe8f5;
  --bg-content: #ebe8f5;
  --surface-card: #ffffff;
  --surface-input: #ffffff;
  --surface-muted: #f5f3ff;

  --header-bg: linear-gradient(128deg, #7c8ef5 0%, #9b5de5 42%, #e056a0 100%);
  --header-text: #ffffff;
  --header-text-muted: rgba(255, 255, 255, 0.82);
  --header-icon-bg: rgba(255, 255, 255, 0.22);
  --header-icon-text: #ffffff;
  --header-seg-track: rgba(255, 255, 255, 0.2);
  --header-seg-text: rgba(255, 255, 255, 0.88);
  --header-seg-active-bg: #ffffff;
  --header-seg-active-text: #6d28d9;
  --header-chip-bg: rgba(255, 255, 255, 0.18);
  --header-chip-text: #ffffff;
  --header-chip-active-bg: #ffffff;
  --header-chip-active-text: #6d28d9;

  --text-primary: #1e1b4b;
  --text-secondary: #64748b;
  --text-on-brand: #ffffff;

  --primary: #7c3aed;
  --primary-soft: rgba(124, 58, 237, 0.1);
  --accent: #db2777;
  --accent-soft: rgba(219, 39, 119, 0.1);
  --danger: #e11d48;
  --success: #059669;

  --border: #e4e0f5;
  --border-strong: #d4ccf5;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --radius-fab: 50%;

  --shadow-card: 0 2px 12px rgba(109, 40, 217, 0.07);
  --shadow-nav: 0 -4px 24px rgba(109, 40, 217, 0.1);
  --shadow-lg: 0 16px 40px rgba(109, 40, 217, 0.14);

  --btn-primary-bg: linear-gradient(135deg, #8b5cf6, #d946ef);
  --btn-primary-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);

  --chip-bg: #ffffff;
  --chip-text: #64748b;
  --chip-border: #e4e0f5;
  --chip-active-bg: linear-gradient(135deg, #8b5cf6, #d946ef);
  --chip-active-text: #ffffff;
  --chip-active-border: transparent;

  --icon-btn-bg: #ffffff;
  --icon-btn-text: #6d28d9;
  --icon-btn-border: #e4e0f5;

  --nav-bg: rgba(255, 255, 255, 0.97);
  --nav-border: #ebe4ff;
  --nav-text: #94a3b8;
  --nav-active-text: #7c3aed;
  --nav-active-bg: rgba(124, 58, 237, 0.1);
  --nav-active-icon-bg: linear-gradient(135deg, #8b5cf6, #d946ef);
  --nav-active-icon-text: #ffffff;
  --nav-icon-active-size: 40px;
  --nav-icon-active-radius: 14px;

  --theme-badge-bg: rgba(255, 255, 255, 0.28);
  --theme-badge-text: #ffffff;

  --fab-bg: linear-gradient(135deg, #a855f7, #ec4899);
  --fab-shadow: 0 8px 28px rgba(168, 85, 247, 0.45);
  --fab-ring: #ffffff;

  --planner-surface: #ffffff;
  --planner-cell: #faf8ff;
  --planner-grid: #ede9fe;
  --planner-today: rgba(124, 58, 237, 0.08);
  --planner-slot-hover: rgba(124, 58, 237, 0.12);
  --planner-today-badge-bg: linear-gradient(135deg, #8b5cf6, #ec4899);
  --planner-today-badge-text: #ffffff;

  --login-bg: linear-gradient(155deg, #ddd6fe 0%, #fbcfe8 45%, #c7d2fe 100%);
  --modal-backdrop: rgba(30, 27, 75, 0.42);
  --modal-radius: 24px 24px 0 0;
  --theme-color: #8b5cf6;
  --chrome-bg: #8b5cf6;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --header-radius: 0;
  --nav-radius: 0;
  --nav-margin: 0;
  --text-transform-ui: none;
  --font-size-nav: 12px;

  --check-idle: #94a3b8;
  --check-idle-hover: #64748b;
  --check-done-bg: rgba(5, 150, 105, 0.12);
}
[data-theme="vitality"] {
  --font: "Segoe UI", system-ui, sans-serif;

  --bg-app: #070a12;
  --bg-content: #070a12;
  --surface-card: #12182a;
  --surface-input: #0a0e18;
  --surface-muted: #181e30;

  --header-bg: #12182a;
  --header-text: #2dd4bf;
  --header-text-muted: #6b7c99;
  --header-icon-bg: #181e30;
  --header-icon-text: #2dd4bf;
  --header-seg-track: #070a12;
  --header-seg-text: #6b7c99;
  --header-seg-active-bg: #2dd4bf;
  --header-seg-active-text: #070a12;
  --header-chip-bg: #181e30;
  --header-chip-text: #94a3b8;
  --header-chip-active-bg: #2dd4bf;
  --header-chip-active-text: #070a12;

  --text-primary: #f1f5f9;
  --text-secondary: #7c8ba8;
  --text-on-brand: #070a12;

  --primary: #2dd4bf;
  --primary-soft: rgba(45, 212, 191, 0.12);
  --accent: #f472b6;
  --accent-soft: rgba(244, 114, 182, 0.12);
  --danger: #fb7185;
  --success: #34d399;

  --border: #243044;
  --border-strong: #2dd4bf;

  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --radius-pill: 4px;
  --radius-fab: 8px;

  --shadow-card: 0 0 0 1px #243044;
  --shadow-nav: 0 -2px 0 #2dd4bf;
  --shadow-lg: 0 0 32px rgba(45, 212, 191, 0.12);

  --btn-primary-bg: #2dd4bf;
  --btn-primary-shadow: 0 0 20px rgba(45, 212, 191, 0.4);

  --chip-bg: #12182a;
  --chip-text: #7c8ba8;
  --chip-border: #243044;
  --chip-active-bg: #2dd4bf;
  --chip-active-text: #070a12;
  --chip-active-border: #2dd4bf;

  --icon-btn-bg: #181e30;
  --icon-btn-text: #2dd4bf;
  --icon-btn-border: #243044;

  --nav-bg: #12182a;
  --nav-border: #2dd4bf;
  --nav-text: #6b7c99;
  --nav-active-text: #2dd4bf;
  --nav-active-bg: rgba(45, 212, 191, 0.1);
  --nav-active-icon-bg: transparent;
  --nav-active-icon-text: #2dd4bf;
  --nav-icon-active-size: auto;
  --nav-icon-active-radius: 0;

  --theme-badge-bg: rgba(45, 212, 191, 0.14);
  --theme-badge-text: #2dd4bf;

  --fab-bg: #2dd4bf;
  --fab-shadow: 0 0 28px rgba(45, 212, 191, 0.55);
  --fab-ring: #14b8a6;

  --planner-surface: #181e30;
  --planner-cell: #070a12;
  --planner-grid: #1a2236;
  --planner-today: rgba(45, 212, 191, 0.07);
  --planner-slot-hover: rgba(45, 212, 191, 0.16);
  --planner-today-badge-bg: rgba(45, 212, 191, 0.14);
  --planner-today-badge-text: #2dd4bf;

  --login-bg: #070a12;
  --modal-backdrop: rgba(0, 0, 0, 0.82);
  --modal-radius: 8px 8px 0 0;
  --theme-color: #070a12;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --header-radius: 0;
  --nav-radius: 0;
  --nav-margin: 0;
  --text-transform-ui: uppercase;
  --font-size-nav: 10px;

  --check-idle: #6b7c99;
  --check-idle-hover: #9aa8c0;
  --check-done-bg: rgba(52, 211, 153, 0.14);
}
[data-theme="luminous"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;

  --bg-app: #f5f5f7;
  --bg-content: #f5f5f7;
  --surface-card: #ffffff;
  --surface-input: #f5f5f7;
  --surface-muted: #f9f9fb;

  --header-bg: #ffffff;
  --header-text: #1d1d1f;
  --header-text-muted: #86868b;
  --header-icon-bg: #f5f5f7;
  --header-icon-text: #0071e3;
  --header-seg-track: #e8e8ed;
  --header-seg-text: #86868b;
  --header-seg-active-bg: #ffffff;
  --header-seg-active-text: #0071e3;
  --header-chip-bg: #f5f5f7;
  --header-chip-text: #86868b;
  --header-chip-active-bg: #0071e3;
  --header-chip-active-text: #ffffff;

  --text-primary: #1d1d1f;
  --text-secondary: #86868b;
  --text-on-brand: #ffffff;

  --primary: #0071e3;
  --primary-soft: rgba(0, 113, 227, 0.1);
  --accent: #34c759;
  --accent-soft: rgba(52, 199, 89, 0.12);
  --danger: #ff3b30;
  --success: #34c759;

  --border: #e8e8ed;
  --border-strong: #d2d2d7;

  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 16px;
  --radius-pill: 10px;
  --radius-fab: 16px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);

  --btn-primary-bg: #0071e3;
  --btn-primary-shadow: 0 2px 8px rgba(0, 113, 227, 0.28);

  --chip-bg: #ffffff;
  --chip-text: #86868b;
  --chip-border: #e8e8ed;
  --chip-active-bg: #0071e3;
  --chip-active-text: #ffffff;
  --chip-active-border: #0071e3;

  --icon-btn-bg: #ffffff;
  --icon-btn-text: #1d1d1f;
  --icon-btn-border: #e8e8ed;

  --nav-bg: #ffffff;
  --nav-border: #e8e8ed;
  --nav-text: #86868b;
  --nav-active-text: #0071e3;
  --nav-active-bg: rgba(0, 113, 227, 0.08);
  --nav-active-icon-bg: transparent;
  --nav-active-icon-text: #0071e3;
  --nav-icon-active-size: auto;
  --nav-icon-active-radius: 0;

  --theme-badge-bg: #e8e8ed;
  --theme-badge-text: #0071e3;

  --fab-bg: #0071e3;
  --fab-shadow: 0 4px 14px rgba(0, 113, 227, 0.32);
  --fab-ring: #f5f5f7;

  --planner-surface: #ffffff;
  --planner-cell: #fafafa;
  --planner-grid: #f0f0f5;
  --planner-today: rgba(0, 113, 227, 0.05);
  --planner-slot-hover: rgba(0, 113, 227, 0.08);
  --planner-today-badge-bg: #0071e3;
  --planner-today-badge-text: #ffffff;

  --login-bg: #f5f5f7;
  --modal-backdrop: rgba(0, 0, 0, 0.32);
  --modal-radius: 16px 16px 0 0;
  --theme-color: #0071e3;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --header-radius: 0;
  --nav-radius: 18px;
  --nav-margin: 0 14px 10px;
  --text-transform-ui: none;
  --font-size-nav: 12px;

  --check-idle: #aeaeb2;
  --check-idle-hover: #86868b;
  --check-done-bg: rgba(52, 199, 89, 0.12);
}

/* ─── MOSI: пастельное расписание, edge-to-edge без белых полос ─── */
[data-theme="mosi"] {
  --font: "Roboto", "Segoe UI", system-ui, sans-serif;

  --bg-app: #e8f1f7;
  --bg-content: #e8f1f7;
  --surface-card: #f6fafc;
  --surface-input: #f6fafc;
  --surface-muted: #eef4f8;

  --header-bg: #a8c5da;
  --header-text: #3d5568;
  --header-text-muted: #5d7a8c;
  --header-icon-bg: rgba(255, 255, 255, 0.45);
  --header-icon-text: #3d5568;
  --header-seg-track: transparent;
  --header-seg-text: rgba(61, 85, 104, 0.72);
  --header-seg-active-bg: transparent;
  --header-seg-active-text: #2f4858;
  --header-chip-bg: rgba(255, 255, 255, 0.35);
  --header-chip-text: #3d5568;
  --header-chip-active-bg: rgba(255, 255, 255, 0.55);
  --header-chip-active-text: #2f4858;

  --text-primary: #3d4f5c;
  --text-secondary: #6b8494;
  --text-on-brand: #ffffff;

  --primary: #7a9eb5;
  --primary-soft: rgba(122, 158, 181, 0.18);
  --accent: #9ec9cf;
  --accent-soft: rgba(158, 201, 207, 0.22);
  --danger: #e8a0a0;
  --success: #8ecf9e;

  --border: #d4e3ed;
  --border-strong: #b8cfde;

  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-pill: 0;
  --radius-fab: 50%;

  --shadow-card: none;
  --shadow-nav: none;
  --shadow-lg: 0 2px 8px rgba(61, 85, 104, 0.1);

  --btn-primary-bg: #8eb4ca;
  --btn-primary-shadow: none;

  --chip-bg: transparent;
  --chip-text: rgba(61, 85, 104, 0.75);
  --chip-border: transparent;
  --chip-active-bg: transparent;
  --chip-active-text: #2f4858;
  --chip-active-border: #2f4858;

  --icon-btn-bg: rgba(255, 255, 255, 0.45);
  --icon-btn-text: #3d5568;
  --icon-btn-border: transparent;

  --nav-bg: #a8c5da;
  --nav-border: #96b8cf;
  --nav-text: rgba(61, 85, 104, 0.68);
  --nav-active-text: #2f4858;
  --nav-active-bg: transparent;
  --nav-active-icon-bg: transparent;
  --nav-active-icon-text: #2f4858;
  --nav-icon-active-size: auto;
  --nav-icon-active-radius: 0;

  --theme-badge-bg: rgba(255, 255, 255, 0.42);
  --theme-badge-text: #3d5568;

  --fab-bg: #8eb4ca;
  --fab-shadow: 0 2px 8px rgba(61, 85, 104, 0.18);
  --fab-ring: #e8f1f7;

  --planner-surface: #f6fafc;
  --planner-cell: #f0f6fa;
  --planner-grid: #d4e3ed;
  --planner-today: rgba(168, 197, 218, 0.35);
  --planner-slot-hover: rgba(197, 232, 236, 0.45);
  --planner-today-badge-bg: #b5dde3;
  --planner-today-badge-text: #3d5568;

  --login-bg: #a8c5da;
  --modal-backdrop: rgba(61, 85, 104, 0.32);
  --modal-radius: 0;
  --theme-color: #a8c5da;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --header-radius: 0;
  --nav-radius: 0;
  --nav-margin: 0;
  --text-transform-ui: uppercase;
  --font-size-nav: 10px;

  --check-idle: #a8bcc8;
  --check-idle-hover: #7a96a8;
  --check-done-bg: rgba(142, 207, 158, 0.22);

  --section-teal: #c5e8ec;
  --section-pink: #f0d4dc;
  --section-title-text: #4d6575;
  --info-banner-bg: #e4f3e6;
  --info-banner-text: #4a7356;
  --tag-teal: #b5dde3;
  --tag-blue: #9eb9cc;
}

[data-theme] {
  --bg: var(--bg-app);
  --bg-pattern: var(--bg-app);
  --surface: var(--surface-card);
  --surface2: var(--surface-muted);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-on-header: var(--header-text);
  --text-on-primary: var(--text-on-brand);
  --card-shadow: var(--shadow-card);
  --seg-bg: var(--header-seg-track);
  --seg-active-bg: var(--header-seg-active-bg);
  --seg-active-color: var(--header-seg-active-text);
  --input-bg: var(--surface-input);
  --input-border: var(--border);
  --planner-header: var(--planner-surface);
  --planner-grid-line: var(--planner-grid);
  --planner-slot-active: var(--planner-slot-hover);
  --icon-bg: var(--icon-btn-bg);
  --icon-color: var(--icon-btn-text);
  --check-border: var(--check-idle);
  --check-active: var(--success);
  --check-idle: #9ca3af;
  --check-idle-hover: #6b7280;
  --check-done-bg: color-mix(in srgb, var(--success) 16%, transparent);
}

html:not([data-theme]) {
  --bg-app: #0f172a;
  --text-primary: #f1f5f9;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}