/* ─────────────────────────────────────────────────────────────────────────
   Design tokens, themes, wallpapers.
   Dark-first. The light palette is a full re-declaration, not a patch, so a
   colour never leaks from one theme into the other.
   ───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg:          #0a0d14;
  --bg-2:        #0e1220;
  --surface:     rgba(22, 27, 42, 0.72);
  --surface-2:   rgba(30, 36, 54, 0.72);
  --surface-sol: #161b2a;
  --elevated:    rgba(34, 41, 61, 0.92);
  --line:        rgba(148, 163, 199, 0.16);
  --line-strong: rgba(148, 163, 199, 0.30);

  /* Text */
  --text:        #eef2fb;
  --text-2:      #b3bdd4;
  --text-3:      #8d99b6;
  --on-accent:   #ffffff;

  /* Accent — overwritten at runtime from user prefs */
  --accent:      #3b82f6;
  --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 46%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 82%, white);

  /* Semantic */
  --good:  #22c55e;
  --warn:  #f59e0b;
  --bad:   #ef4444;
  --info:  #38bdf8;
  --rest:  #475569;

  /* Shape & motion */
  --r-2xs: 4px; --r-xs: 8px;  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px;

  /* Типографическая шкала. Каждый размер в вёрстке берётся отсюда — иначе
     «почти одинаковые» .82/.84/.85rem расползаются по файлу и рядом стоящие
     подписи выглядят разнокалиберными. */
  --fs-3xs: .66rem;   /* 10.6px — подписи под иконками, микро-бейджи */
  --fs-2xs: .72rem;   /* 11.5px — подписи плиток, шапка таблицы        */
  --fs-xs:  .8rem;    /* 12.8px — второстепенный текст, подсказки      */
  --fs-sm:  .87rem;   /* 13.9px — мелкие кнопки, сегменты             */
  --fs-md:  .95rem;   /* 15.2px — основной текст                      */
  --fs-lg:  1.02rem;  /* 16.3px — h3, крупные значения в карточке     */
  --fs-xl:  1.2rem;   /* 19.2px — h2, число дня                       */
  --fs-2xl: 1.5rem;   /* 24px   — значение плитки, h1                 */
  --fs-3xl: 1.7rem;   /* 27.2px — инициалы в большом аватаре          */
  --fs-icon:    21px; /* эмодзи-иконки разделов и гармошки            */
  --fs-icon-sm: 18px; /* эмодзи в кнопках верхней панели              */
  --shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.24);
  --shadow-2: 0 8px 30px rgba(0,0,0,.42);
  --shadow-pop: 0 18px 50px rgba(0,0,0,.55);
  --blur: 18px;
  --ease: cubic-bezier(.2, .8, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .14s;  --t: .24s;  --t-slow: .42s;

  /* Layout */
  --nav-h: 64px;
  --rail-w: 248px;
  --pad: 16px;
  --cell: 42px;
  --name-w: 132px;
  --sum-w: 62px;
  --row-h: 40px;

  /* Wallpaper controls */
  --wall-dim: .55;
  --wall-blur: 0px;
  --wall-image: none;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #eef1f7;
  --bg-2:        #e3e8f2;
  --surface:     rgba(255, 255, 255, 0.86);
  --surface-2:   rgba(255, 255, 255, 0.95);
  --surface-sol: #ffffff;
  --elevated:    rgba(255, 255, 255, 0.97);
  --line:        rgba(15, 23, 42, 0.13);
  --line-strong: rgba(15, 23, 42, 0.24);
  --text:        #0d1526;
  --text-2:      #47566f;
  --text-3:      #5b6a80;
  --rest:        #94a3b8;
  --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.08);
  --shadow-2: 0 10px 30px rgba(15,23,42,.12);
  --shadow-pop: 0 20px 50px rgba(15,23,42,.22);
  --wall-dim: .22;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --bg: #eef1f7; --bg-2: #e3e8f2;
    --surface: rgba(255,255,255,.86); --surface-2: rgba(255,255,255,.95); --surface-sol: #fff;
    --elevated: rgba(255,255,255,.97);
    --line: rgba(15,23,42,.13); --line-strong: rgba(15,23,42,.24);
    --text: #0d1526; --text-2: #47566f; --text-3: #5b6a80; --rest: #94a3b8;
    --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.08);
    --shadow-2: 0 10px 30px rgba(15,23,42,.12);
    --shadow-pop: 0 20px 50px rgba(15,23,42,.22);
    --wall-dim: .22;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.42;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── Wallpaper layers ──────────────────────────────────────────────────── */
.wall, .scrim { position: fixed; inset: -2px; pointer-events: none; }
.wall {
  z-index: -2;
  background: var(--wall-fallback, linear-gradient(160deg, var(--bg), var(--bg-2)));
  background-size: cover;
  background-position: center;
  filter: blur(var(--wall-blur));
  transform: scale(1.03);
  transition: opacity var(--t-slow) var(--ease);
}
.wall::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--wall-image);
  background-size: cover; background-position: center;
  opacity: var(--wall-opacity, 1);
}
.scrim {
  z-index: -1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) calc(var(--wall-dim) * 118%), transparent) 0%,
      color-mix(in srgb, var(--bg) calc(var(--wall-dim) * 74%),  transparent) 34%,
      color-mix(in srgb, var(--bg) calc(var(--wall-dim) * 96%),  transparent) 100%);
}

/* Preset wallpapers */
:root[data-wall="none"]   .wall { --wall-fallback: linear-gradient(165deg, var(--bg) 0%, var(--bg-2) 100%); }
:root[data-wall="aurora"] .wall {
  --wall-fallback:
    radial-gradient(58% 46% at 12% 8%,  #4338ca66 0%, transparent 62%),
    radial-gradient(52% 44% at 88% 4%,  #0ea5e955 0%, transparent 60%),
    radial-gradient(64% 52% at 72% 84%, #7c3aed4d 0%, transparent 66%),
    radial-gradient(46% 40% at 22% 92%, #06b6d43d 0%, transparent 62%),
    linear-gradient(160deg, #0a0d14, #10152a);
}
:root[data-wall="mesh"] .wall {
  --wall-fallback:
    radial-gradient(44% 38% at 20% 22%, #f43f5e4d 0%, transparent 60%),
    radial-gradient(50% 42% at 78% 18%, #f59e0b45 0%, transparent 62%),
    radial-gradient(56% 46% at 60% 88%, #3b82f652 0%, transparent 64%),
    linear-gradient(150deg, #0b0f1a, #171226);
}
:root[data-wall="dusk"] .wall {
  --wall-fallback:
    radial-gradient(70% 50% at 50% 100%, #f9731640 0%, transparent 70%),
    radial-gradient(60% 44% at 80% 10%, #db277744 0%, transparent 66%),
    linear-gradient(175deg, #0d0b16, #1b1024 60%, #241426);
}
:root[data-wall="ocean"] .wall {
  --wall-fallback:
    radial-gradient(60% 46% at 15% 100%, #06b6d44d 0%, transparent 68%),
    radial-gradient(56% 40% at 85% 6%, #2563eb4d 0%, transparent 64%),
    linear-gradient(170deg, #060d18, #0a1a2b);
}
:root[data-wall="sand"] .wall {
  --wall-fallback:
    radial-gradient(60% 50% at 20% 0%, #fbbf2440 0%, transparent 62%),
    radial-gradient(60% 50% at 90% 80%, #f9731636 0%, transparent 66%),
    linear-gradient(170deg, #14100b, #221a11);
}
:root[data-wall="carbon"] .wall {
  --wall-fallback:
    repeating-linear-gradient(135deg, #ffffff08 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #0a0c11, #14171f);
}
:root[data-wall="court"] .wall {
  --wall-fallback:
    repeating-linear-gradient(90deg, transparent 0 118px, #ffffff10 118px 120px),
    repeating-linear-gradient(0deg,  transparent 0 118px, #ffffff0d 118px 120px),
    radial-gradient(70% 60% at 50% 0%, #f59e0b2e 0%, transparent 66%),
    linear-gradient(165deg, #10202b, #0b1620);
}
:root[data-theme="light"][data-wall="aurora"] .wall {
  --wall-fallback:
    radial-gradient(58% 46% at 12% 8%,  #a5b4fcaa 0%, transparent 62%),
    radial-gradient(52% 44% at 88% 4%,  #7dd3fcaa 0%, transparent 60%),
    radial-gradient(64% 52% at 72% 84%, #c4b5fdaa 0%, transparent 66%),
    linear-gradient(160deg, #eef1f7, #dfe7f6);
}
:root[data-theme="light"][data-wall="court"] .wall {
  --wall-fallback:
    repeating-linear-gradient(90deg, transparent 0 118px, #0f172a0f 118px 120px),
    repeating-linear-gradient(0deg,  transparent 0 118px, #0f172a0c 118px 120px),
    linear-gradient(165deg, #e7eef5, #dbe7f2);
}
:root[data-theme="light"][data-wall="mesh"] .wall {
  --wall-fallback:
    radial-gradient(44% 38% at 20% 22%, #fecdd3cc 0%, transparent 60%),
    radial-gradient(50% 42% at 78% 18%, #fde68acc 0%, transparent 62%),
    radial-gradient(56% 46% at 60% 88%, #bfdbfecc 0%, transparent 64%),
    linear-gradient(150deg, #f4f6fb, #eceff8);
}

/* ── Motion preferences ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}

/* ── Base elements ─────────────────────────────────────────────────────── */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--accent-text); text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
small { font-size: var(--fs-xs); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--accent-soft); }

button, input, select, textarea, .tap, [role="button"] { touch-action: manipulation; }

/* iOS zooms into any field below 16px and never zooms back out. */
input, select, textarea { font-size: 16px; }
@media (min-width: 860px) { input, select, textarea { font-size: var(--fs-sm); } }

.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-xs); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }