/* =====================================================================
   Admister UI v4 «Призма» — токены (docs/DESIGN.md §10)
   Светлая тема — «слоновая кость и шёлк», тёмная — «полуночный бархат».
   У каждой вертикали свой драгоценный камень: три яркие краски для
   декора (--c1..--c3, градиенты, 3D, графики) и пара глубоких для
   кнопок (--b1, --b2 — белый текст на них держит контраст ≥ 4.5).
   ===================================================================== */
:root {
  color-scheme: light;
  /* холст и поверхности */
  --bg: #f6f3ee;
  --bg-2: #efebe4;
  --surface: #ffffff;
  --surface-2: #faf8f5;
  --surface-3: #f2eee8;
  --glass: rgba(255, 255, 255, .72);
  --glass-2: rgba(255, 255, 255, .5);
  --glass-line: rgba(255, 255, 255, .7);
  --scrim: rgba(12, 10, 20, .52);

  /* чернила */
  --ink: #15121f;
  --ink-2: #4b4659;
  --ink-3: #6f6a7d;
  --ink-4: #9b96a7;
  --line: rgba(21, 18, 31, .09);
  --line-2: rgba(21, 18, 31, .16);
  --line-3: rgba(21, 18, 31, .26);

  /* драгоценный металл: премиум, VIP, проверенные */
  --gold: #a87b22;
  --gold-2: #d9b25c;
  --gold-3: #f3e2b3;
  --gold-grad: linear-gradient(135deg, #f7e3a4 0%, #d6a441 38%, #a8741c 62%, #efd08a 100%);

  /* состояния — только для состояний */
  --ok: #0f8a5f;   --ok-soft: #dff5ea;
  --warn: #b26a00; --warn-soft: #fff1d6;
  --err: #d0263e;  --err-soft: #fde4e8;
  --info: #2f5bd8; --info-soft: #e3ebff;

  /* типографика */
  --f-text: 'Onest', 'Onest fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-head: 'Geologica', 'Geologica fallback', 'Onest', system-ui, sans-serif;
  --f-serif: 'Playfair Display', 'Playfair Display fallback', Georgia, 'Times New Roman', serif;
  --f-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-md: .9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.25rem;
  --fs-2xl: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  --fs-3xl: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
  --fs-4xl: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  --fs-display: clamp(2.6rem, 1.3rem + 5.2vw, 5.6rem);

  /* геометрия */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --wrap: 1320px;
  --wrap-narrow: 860px;
  --gutter: clamp(16px, 3.4vw, 40px);
  --hdr-h: 68px;

  /* тени: мягкие, окрашенные в цвет раздела */
  --sh-1: 0 1px 2px rgba(21, 18, 31, .05), 0 1px 1px rgba(21, 18, 31, .03);
  --sh-2: 0 6px 18px -6px rgba(21, 18, 31, .12), 0 2px 6px -2px rgba(21, 18, 31, .06);
  --sh-3: 0 22px 48px -18px rgba(21, 18, 31, .24), 0 8px 18px -8px rgba(21, 18, 31, .1);

  /* движение */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --t-fast: .16s;
  --t: .32s;
  --t-slow: .7s;

  /* вертикаль по умолчанию (board) — переопределяется [data-svc] */
  --c1: #ff9f1c; --c2: #ff4d6d; --c3: #ffd166;
  --b1: #d9480f; --b2: #c2185b;
  --acc: #d9480f; --acc-ink: #ffffff; --acc-text: #b93a0b; --acc-soft: #ffe9dc;
}

/* Производные краски объявлены там же, где краски вертикали: свойство, ссылающееся на
   другое, вычисляется на СВОЁМ элементе, и на :root градиент застыл бы цветами board. */
:root, [data-svc] {
  --grad: linear-gradient(120deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 110%);
  --grad-btn: linear-gradient(135deg, var(--b1) 0%, var(--b2) 100%);
  --grad-text: linear-gradient(100deg, var(--b1) 0%, var(--b2) 60%, var(--c1) 100%);
  --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--c1) 16%, transparent), color-mix(in srgb, var(--c2) 12%, transparent));
  --mesh-a: color-mix(in srgb, var(--c1) 26%, transparent);
  --mesh-b: color-mix(in srgb, var(--c2) 20%, transparent);
  --mesh-c: color-mix(in srgb, var(--c3) 22%, transparent);
  --sh-glow: 0 16px 36px -14px color-mix(in srgb, var(--b1) 65%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--b2) 35%, transparent);
  --ring: 0 0 0 4px color-mix(in srgb, var(--c1) 26%, transparent);
}

/* ---------- характер вертикалей ---------- */
[data-svc="board"]   { --c1: #ff9f1c; --c2: #ff4d6d; --c3: #ffd166; --b1: #d9480f; --b2: #c2185b; --acc: #d9480f; --acc-text: #b93a0b; --acc-soft: #ffe9dc; }
[data-svc="auto"]    { --c1: #ffc53d; --c2: #ff7a00; --c3: #fff0b8; --b1: #ffc53d; --b2: #ff8a00; --acc: #ffb020; --acc-ink: #1c1203; --acc-text: #8a5300; --acc-soft: #fff3d1; }
[data-svc="realty"]  { --c1: #10b981; --c2: #0d9488; --c3: #e9d8a6; --b1: #047857; --b2: #0f766e; --acc: #047857; --acc-text: #046c4e; --acc-soft: #d9f5ea; }
[data-svc="market"]  { --c1: #3b82f6; --c2: #06b6d4; --c3: #a5b4fc; --b1: #2342f0; --b2: #0369a1; --acc: #2342f0; --acc-text: #1f3ad6; --acc-soft: #e2e8ff; }
[data-svc="digital"] { --c1: #8b5cf6; --c2: #ec4899; --c3: #22d3ee; --b1: #7c3aed; --b2: #c026d3; --acc: #7c3aed; --acc-text: #6d28d9; --acc-soft: #efe7ff; }
[data-svc="deals"]   { --c1: #f43f5e; --c2: #fb923c; --c3: #fda4af; --b1: #e11d48; --b2: #be123c; --acc: #e11d48; --acc-text: #be123c; --acc-soft: #ffe4ea; }
[data-svc="price"]   { --c1: #06b6d4; --c2: #6366f1; --c3: #a7f3d0; --b1: #0e7490; --b2: #4338ca; --acc: #0e7490; --acc-text: #0b6780; --acc-soft: #dcf4f8; }

/* палитра «сестёр» — чтобы ссылки на соседние вертикали несли свой цвет */
.sv-board   { --sv1: #ff9f1c; --sv2: #ff4d6d; --svb: #d9480f; }
.sv-auto    { --sv1: #ffc53d; --sv2: #ff7a00; --svb: #b86e00; }
.sv-realty  { --sv1: #10b981; --sv2: #0d9488; --svb: #047857; }
.sv-market  { --sv1: #3b82f6; --sv2: #06b6d4; --svb: #2342f0; }
.sv-digital { --sv1: #8b5cf6; --sv2: #ec4899; --svb: #7c3aed; }
.sv-deals   { --sv1: #f43f5e; --sv2: #fb923c; --svb: #e11d48; }
.sv-price   { --sv1: #06b6d4; --sv2: #6366f1; --svb: #0e7490; }

/* ---------- тёмная тема «полуночный бархат» ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0a12; --bg-2: #100e19;
    --surface: #15131f; --surface-2: #1a1826; --surface-3: #221f30;
    --glass: rgba(24, 21, 36, .7); --glass-2: rgba(24, 21, 36, .5); --glass-line: rgba(255, 255, 255, .08);
    --scrim: rgba(0, 0, 0, .66);
    --ink: #f5f2fb; --ink-2: #c9c3d6; --ink-3: #9e97ae; --ink-4: #736c84;
    --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15); --line-3: rgba(255, 255, 255, .26);
    --gold: #e2bd6a; --gold-2: #c99a3e; --gold-3: #3a2f17;
    --ok: #34d399; --ok-soft: rgba(52, 211, 153, .14);
    --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .14);
    --err: #fb7185; --err-soft: rgba(251, 113, 133, .14);
    --info: #8ea9ff; --info-soft: rgba(142, 169, 255, .14);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 8px 22px -8px rgba(0, 0, 0, .6);
    --sh-3: 0 26px 56px -20px rgba(0, 0, 0, .75);
    --acc-soft: color-mix(in srgb, var(--c1) 16%, transparent);
    --acc-text: color-mix(in srgb, var(--c1) 82%, white);
    --grad-text: linear-gradient(100deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0a12; --bg-2: #100e19;
  --surface: #15131f; --surface-2: #1a1826; --surface-3: #221f30;
  --glass: rgba(24, 21, 36, .7); --glass-2: rgba(24, 21, 36, .5); --glass-line: rgba(255, 255, 255, .08);
  --scrim: rgba(0, 0, 0, .66);
  --ink: #f5f2fb; --ink-2: #c9c3d6; --ink-3: #9e97ae; --ink-4: #736c84;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15); --line-3: rgba(255, 255, 255, .26);
  --gold: #e2bd6a; --gold-2: #c99a3e; --gold-3: #3a2f17;
  --ok: #34d399; --ok-soft: rgba(52, 211, 153, .14);
  --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .14);
  --err: #fb7185; --err-soft: rgba(251, 113, 133, .14);
  --info: #8ea9ff; --info-soft: rgba(142, 169, 255, .14);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 8px 22px -8px rgba(0, 0, 0, .6);
  --sh-3: 0 26px 56px -20px rgba(0, 0, 0, .75);
}
:root[data-theme="dark"] [data-svc] {
  --acc-soft: color-mix(in srgb, var(--c1) 16%, transparent);
  --acc-text: color-mix(in srgb, var(--c1) 82%, white);
  --grad-text: linear-gradient(100deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-svc] {
    --acc-soft: color-mix(in srgb, var(--c1) 16%, transparent);
    --acc-text: color-mix(in srgb, var(--c1) 82%, white);
    --grad-text: linear-gradient(100deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  }
}