/*
 * Хижа — токени дизайн-системи (ios-design/tokens.json) як змінні CSS.
 * День — за замовчуванням; [data-theme="night"] міняє поверхні й чорнило.
 * [data-mode] задає --band / --on-band для всього всередині.
 * Наприкінці — рецепти Liquid Glass з полотна «B · Пульт».
 */

:root {
  /* Колір · тема «День» */
  --surface: #eef0eb;
  --surface-raised: #ffffff;
  --surface-sunken: #eaede7;
  --line: #d8ddd5;
  --ink: #17201b;
  --ink-muted: #56615b;
  --on-ink: #ffffff;

  /* Режими — однакові в обох темах */
  --mode-home: #f6c445;
  --on-mode-home: #241b00;
  --mode-away: #2c4bb0;
  --on-mode-away: #f2f5ff;
  --mode-night: #161a33;
  --on-mode-night: #c9cff5;
  --mode-outage: #ff8a3d;
  --on-mode-outage: #2b1100;
  --heat-band: var(--mode-home);

  /* Кадри з камер і екран блокування — завжди темні */
  --media: #1c2420;
  --on-media: #b5c1bb;
  --on-media-strong: #e4eae6;
  --lock-surface: #202540;
  --on-lock: #e2e5f6;
  --on-lock-muted: #b3b9da;

  /* Нічні поверхні, коли треба темне незалежно від теми (перший екран) */
  --night-surface: #0c0e18;
  --night-surface-raised: #171b2c;

  /* Шрифти */
  --font-display: Geologica, "Arial Narrow", system-ui, sans-serif;
  --font-text: "Golos Text", system-ui, -apple-system, sans-serif;

  /* Типографіка: font-shorthand (вага розмір/рядок родина) */
  --type-clock: 800 92px/1 var(--font-display);
  --type-number-xl: 800 40px/1 var(--font-display);
  --type-screen-title: 800 30px/1 var(--font-display);
  --type-number-l: 700 24px/28px var(--font-display);
  --type-card-title: 700 17px/22px var(--font-display);
  --type-pill: 700 14px/18px var(--font-display);
  --type-strip: 600 12px/16px var(--font-display);
  --type-input: 400 15px/20px var(--font-text);
  --type-body: 400 14px/20px var(--font-text);
  --type-body-strong: 600 14px/20px var(--font-text);
  --type-button: 600 13px/18px var(--font-text);
  --type-caption: 400 12px/16px var(--font-text);
  --type-section-label: 700 11px/14px var(--font-text);
  --type-tab: 500 11px/14px var(--font-text);
  --tracking-clock: -0.04em;
  --tracking-screen-title: -0.02em;
  --tracking-section-label: 0.07em;

  /* Відступи */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-band-top: 52px;

  /* Радіуси */
  --radius-s: 7px;
  --radius-m: 11px;
  --radius-l: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Мінімальна ціль натискання */
  --tap-min: 44px;

  /* Режим за замовчуванням — «Без світла» (перший екран) */
  --band: var(--mode-outage);
  --on-band: var(--on-mode-outage);
  --glow: var(--mode-outage);
  --glow-opacity: 0.3;
}

/* Тема «Ніч» */
[data-theme="night"] {
  --surface: #0c0e18;
  --surface-raised: #171b2c;
  --surface-sunken: #232842;
  --line: #262b42;
  --ink: #e2e5f6;
  --ink-muted: #9097b8;
  --on-ink: #0c0e18;
}

/* Режим → колір смуги, тексту на ній і світіння сторінки */
[data-mode="home"] {
  --band: var(--mode-home);
  --on-band: var(--on-mode-home);
  --glow: var(--mode-home);
  --glow-opacity: 0.3;
}

[data-mode="away"] {
  --band: var(--mode-away);
  --on-band: var(--on-mode-away);
  --glow: var(--mode-away);
  --glow-opacity: 0.3;
}

[data-mode="night"] {
  --band: var(--mode-night);
  --on-band: var(--on-mode-night);
  /* Світіння «Ночі» світліше за смугу — інакше на нічній поверхні його не видно */
  --glow: #2b3266;
  --glow-opacity: 0.75;
}

[data-mode="outage"] {
  --band: var(--mode-outage);
  --on-band: var(--on-mode-outage);
  --glow: var(--mode-outage);
  --glow-opacity: 0.3;
}

/* Liquid Glass · рецепти */
:root {
  --glass-sheen: linear-gradient(172deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 46%);
  --glass-tile: var(--glass-sheen), rgba(255, 255, 255, 0.72);
  --glass-bar: var(--glass-sheen), rgba(248, 250, 246, 0.85);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.5),
    0 0 0 0.5px rgba(23, 32, 27, 0.14),
    0 16px 34px -20px rgba(23, 32, 27, 0.45);
  --glass-filter: blur(26px) saturate(185%);
  --quiet-fill: rgba(23, 32, 27, 0.07);

  /* Темне скло — однакове в обох темах (над фото, на екрані блокування) */
  --glass-dark-sheen: linear-gradient(172deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 40%);
  --glass-dark-tile: var(--glass-dark-sheen), rgba(23, 27, 44, 0.7);
  --glass-dark-bar: var(--glass-dark-sheen), rgba(23, 27, 44, 0.85);
  --glass-dark-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.1),
    0 0 0 0.5px rgba(0, 0, 0, 0.6),
    0 18px 36px -18px rgba(0, 0, 0, 0.8);
  --glass-dark-filter: blur(26px) saturate(160%);
}

[data-theme="night"] {
  --glass-sheen: var(--glass-dark-sheen);
  --glass-tile: var(--glass-dark-tile);
  --glass-bar: var(--glass-dark-bar);
  --glass-shadow: var(--glass-dark-shadow);
  --glass-filter: var(--glass-dark-filter);
  --quiet-fill: rgba(226, 229, 246, 0.08);
}

/* Скло, що йде за темою: картки, плитки */
.glass {
  background: var(--glass-tile);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

/* Скло-смуга: меню, перемикач режимів, поле вводу */
.glass-bar {
  background: var(--glass-bar);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

/* Темне скло: над фото й у «Добі» */
.glass-dark {
  background: var(--glass-dark-tile);
  box-shadow: var(--glass-dark-shadow);
  -webkit-backdrop-filter: var(--glass-dark-filter);
  backdrop-filter: var(--glass-dark-filter);
  color: var(--on-lock);
}