/* /assets/css/variables.css  — Prime Design Tokens (Midnight Emerald & Obsidian Silver) */

/* ====== БАЗА (типографика, размеры, тени) ====== */
:root {
   /* Алиасы для совместимости со старыми токенами */
     /* Базовая типографика как дефолт */
  --font-size-base: clamp(14px, 1.7vw, 16px);

  --f-sans: var(--font-sans);
  --fz-t: var(--font-size-base);
  --fz-1: clamp(24px, 5vw, 36px);
  --fz-3: clamp(14px, 2.2vw, 16px);


  /* Типографика */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-size-base: clamp(15px, 1.5vw, 16px);
  --line-height: 1.5;

  /* Нейтрали */
  --white: #FFFFFF;
  --black: #000000;

  /* Состояния (будут подмешиваться к темам) */
  --success: #2EA64F;
  --warning: #DFA11A;
  --danger:  #E05252;

  /* Служебное */
  --bar-h: 64px; /* высота мобильной нижней панели */
}

/* ====== MIDNIGHT EMERALD — LIGHT (основная) ====== */
/* По умолчанию: светлая тема */
:root {
  /* Палитра из рефа */
  --emerald: #0c7a43;
  --obsidian:  #0B0112;
  --champagne: #E5D5B8;
  --mist:      #A3B3C2;

  /* Карта токенов интерфейса */
  --bg:            #F9F8F3;         /* светлая тёплая подложка */
  --bg-soft:       #F2F1EC;
  --surface:       #FFFFFF;
  --surface-2:     #F5F5F2;
  --text:          #102124;          /* тёмный текст с изумрудным подтоном */
  --muted:         #50616A;          /* вторичный текст (читаемый) */
  --line:          rgba(16,33,36,.10);

  /* Акценты и бренд */
  --accent:        var(--emerald);   /* основной бренд */
  --accent-2:      var(--champagne); /* вторичный бренд */
  --brand:         var(--emerald);   /* для логотипа/иконок */

  /* Эффекты */
  --glow:          0 0 0 1px rgba(18,60,67,.06), 0 6px 20px rgba(18,60,67,.10);
}

/* Авто-подстройка под системную тёмную: переключим root на dark-тему, если пользователь так живёт */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* применится Obsidian Silver */
    --charcoal: #0B0E12;
    --graphite: #151A21;
    --silver:   #D6DEE6;
    --ice:      #F2F5F8;

    --bg:        var(--charcoal);
    --bg-soft:   #11141A;
    --surface:   #141824;
    --surface-2: #1A1F2D;
    --text:      var(--ice);
    --muted:     #A7B2BF;
    --line:      rgba(255,255,255,.10);

    --accent: var(--emerald);
    --accent-2:  var(--ice);
    --brand:  var(--emerald);

    --glow:      0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35);
  }
}

/* ====== OBSIDIAN SILVER — DARK (ручной переключатель) ====== */
:root[data-theme="dark"] {
  --charcoal: #0B0E12;
  --graphite: #151A21;
  --silver:   #D6DEE6;
  --ice:      #F2F5F8;

  --bg:        var(--charcoal);
  --bg-soft:   #11141A;
  --surface:   #141824;
  --surface-2: #1A1F2D;
  --text:      var(--ice);
  --muted:     #A7B2BF;
  --line:      rgba(255,255,255,.10);

  --accent: var(--emerald);
  --accent-2:  var(--ice);
  --brand:  var(--emerald);

  --glow:      0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35);
}
/* === Unified radii & shadows (Prime) === */
:root{
  --r-card: 16px;        /* карточки, панели, плитки */
  --r-panel: 16px;       /* большие панели/блоки */
  --r-btn: 12px;         /* кнопки, контролы */
  --r-chip: 12px;        /* чипы/бейджи */

  --sh-card: 0 8px 24px rgba(0,0,0,.06);       /* базовая тень */
  --sh-card-hover: 0 10px 30px rgba(0,0,0,.08);/* hover */
}
/* совместимость со старыми селекторами из components.css */
:root{
  --radius: var(--r-card);
  --shadow: var(--sh-card);
}

/* ====== Базовые ресеты, общие для обеих тем ====== */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text);
  background: var(--bg);
}

/* Примеры полезных утилит на токенах */
.container { width: min(var(--container), 100%); margin-inline: auto; padding-inline: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--glow); }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; border:1px solid var(--line); background: var(--surface); color: var(--text); cursor:pointer; }
.btn-primary { background: var(--accent); color: var(--surface); border-color: color-mix(in oklab, var(--accent) 60%, transparent); }
.btn-primary:hover { filter: brightness(1.06); }
.badge-official { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:2px 8px; border-radius:999px; background: var(--bg-soft); border: 1px solid var(--line); }

/* ===== Header theme tokens ===== */
:root[data-theme="light"]{
  --header-bg:#fff;
  --header-text:#123C43;
  --header-line:rgba(0,0,0,.08);
}
:root[data-theme="dark"]{
  --header-bg:#0E1B1D;
  --header-text:#E7F1F0;
  --header-line:rgba(255,255,255,.12);
}

:where(a,button,[role="button"],input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px}