/* /opt/skynet-portal/app/static/css/tokens.css */
/* v0.5.0 — +светлая тема light-pearl (color-scheme: light, мягкие тени) */
/* 14.06.2026: добавлена 1-я светлая тема; dark-violet/midnight-cyan без изменений */

/* =====================================================================
   БАЗОВЫЕ ТОКЕНЫ (общие для всех тем)
   Эти значения НЕ зависят от темы — типографика, отступы, радиусы, тайминги.
   ===================================================================== */
:root {
  /* --- Шрифты --- */
  --font-sans: "Noto Sans Armenian", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, monospace;
  --font-display: "Noto Sans Armenian", "Inter", sans-serif;
  --font-logo: "Orbitron", "Inter", sans-serif;

  /* --- Размеры шрифта (модульная шкала 1.250) --- */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 1.875rem;   /* 30px */
  --fs-3xl: 2.25rem;    /* 36px */
  --fs-4xl: 3rem;       /* 48px */
  --fs-5xl: 3.75rem;    /* 60px — для крупных hero-цифр */

  /* --- Насыщенность шрифта --- */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* --- Межбуквенный интервал (для премиум-типографики) --- */
  --ls-tighter: -0.03em;
  --ls-tight: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.08em;
  --ls-widest: 0.16em;

  /* --- Высота строки --- */
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* --- Отступы (шкала 4px) --- */
  --sp-1: 0.25rem;   /* 4px */
  --sp-2: 0.5rem;    /* 8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */

  /* --- Скругления (поджаты в v0.4.0 — более собранный, премиальный вид) --- */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 11px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-full: 9999px;

  /* --- Z-индексы (слои) --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-topbar: 400;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tooltip: 800;

  /* --- Переходы (тайминги) --- */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Размеры layout --- */
  --sidebar-width: 248px;
  --sidebar-collapsed: 72px;
  --topbar-height: 64px;
  --container-max: 1600px;

  /* --- Толщина рамок --- */
  --border-thin: 1px;
  --border-base: 1.5px;
  --border-thick: 2px;

  /* =====================================================================
     ПАЛИТРА АКЦЕНТОВ (8 премиальных цветов для панели оформления)
     Юзер выбирает акцент → theme.js подставляет выбранную пару в --accent.
     Каждый: [основной, светлее (hover)]
     ===================================================================== */
  --accent-opt-violet:  #7c5cfc;
  --accent-opt-violet2: #a855f7;
  --accent-opt-gold:    #e8b94a;
  --accent-opt-gold2:   #f5a623;
  --accent-opt-cyan:    #06b6d4;
  --accent-opt-cyan2:   #0ea5e9;
  --accent-opt-emerald: #10b981;
  --accent-opt-emerald2:#22c55e;
  --accent-opt-rose:    #f43f5e;
  --accent-opt-rose2:   #ec4899;
  --accent-opt-blue:    #3b82f6;
  --accent-opt-blue2:   #6366f1;
  --accent-opt-orange:  #f97316;
  --accent-opt-orange2: #fb923c;
  --accent-opt-magenta: #d946ef;
  --accent-opt-magenta2:#a855f7;
}

/* =====================================================================
   ТЕМА 1 — DARK VIOLET (по умолчанию)
   Тёмно-синий фон + сиреневый неон. Стиль SMS-CENTRE.
   ===================================================================== */
:root,
[data-theme="dark-violet"] {
  color-scheme: dark;

  /* --- Фоны (от самого тёмного к светлому) --- */
  --bg-root: #0a0e1a;          /* фон всей страницы */
  --bg-canvas: #0d1326;        /* фон контентной области */
  --bg-surface: #131a32;       /* фон карточек */
  --bg-surface-2: #1a2240;     /* фон вложенных элементов */
  --bg-surface-3: #222c52;     /* hover-фон */
  --bg-elevated: #1e2745;      /* приподнятые элементы (модалки) */
  --bg-input: #0f1528;         /* фон полей ввода */
  --bg-hover: rgba(124, 92, 252, 0.08);   /* фон при наведении */
  --bg-active: rgba(124, 92, 252, 0.16);  /* фон активного элемента */

  /* --- Акцент (главный цвет — сиреневый) --- */
  --accent: #7c5cfc;           /* основной акцент */
  --accent-hover: #8f72ff;     /* при наведении */
  --accent-active: #6a4ae8;    /* при нажатии */
  --accent-dim: #5d44c4;       /* приглушённый акцент (тонкие состояния) */
  --accent-bright: #a98fff;    /* яркий акцент (свечения, блики) */
  --accent-soft: rgba(124, 92, 252, 0.15);  /* мягкий фон акцента */
  --accent-glow: rgba(124, 92, 252, 0.55);  /* свечение */
  --accent-contrast: #ffffff;  /* текст на акценте */

  /* --- Градиент акцента (для кнопок, заголовков) --- */
  --gradient-accent: linear-gradient(135deg, #7c5cfc 0%, #a855f7 100%);
  --gradient-accent-hover: linear-gradient(135deg, #8f72ff 0%, #b866ff 100%);
  --gradient-glow: linear-gradient(135deg, #7c5cfc 0%, #ec4899 100%);

  /* --- Градиент-поверхность (внутренний свет карточек, hero) --- */
  --surface-gradient: linear-gradient(160deg, #18203c 0%, #131a32 55%, #101630 100%);
  --surface-gradient-2: linear-gradient(160deg, #20294c 0%, #1a2240 100%);
  --hero-gradient: radial-gradient(120% 140% at 0% 0%, rgba(124, 92, 252, 0.20) 0%, rgba(124, 92, 252, 0) 55%), linear-gradient(135deg, #18203c 0%, #111733 100%);

  /* --- Highlight-кромка (верхняя светящаяся линия карточек) --- */
  --card-highlight: linear-gradient(90deg, transparent 0%, rgba(124, 92, 252, 0.65) 25%, rgba(168, 85, 247, 0.90) 50%, rgba(124, 92, 252, 0.65) 75%, transparent 100%);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.07);   /* верхняя кромка света на поверхностях */

  /* --- Текст --- */
  --text-primary: #eef1f8;     /* основной текст */
  --text-secondary: #a8b2cf;   /* вторичный текст */
  --text-tertiary: #6b7699;    /* третичный (подписи) */
  --text-muted: #4a5578;       /* приглушённый */
  --text-disabled: #353d5c;    /* отключённый */
  --text-on-accent: #ffffff;   /* на акцентном фоне */

  /* --- Рамки --- */
  --border-subtle: rgba(255, 255, 255, 0.06);   /* еле видимая */
  --border-default: rgba(255, 255, 255, 0.10);  /* обычная */
  --border-strong: rgba(255, 255, 255, 0.16);   /* заметная */
  --border-accent: rgba(124, 92, 252, 0.50);    /* акцентная */

  /* --- Кольцо фокуса (ring) --- */
  --ring: 0 0 0 3px rgba(124, 92, 252, 0.35);
  --ring-strong: 0 0 0 3px rgba(124, 92, 252, 0.55);
  --ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.35);

  /* --- Семантические цвета (статусы, тонировка под тему) --- */
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.15);
  --success-text: #34d399;
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.15);
  --warning-text: #fbbf24;
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.15);
  --danger-text: #f87171;
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, 0.15);
  --info-text: #60a5fa;

  /* --- Тени (тонированы под акцент темы — фиолетовая глубина, усилены) --- */
  --shadow-sm: 0 1px 3px rgba(6, 8, 20, 0.50);
  --shadow-md: 0 6px 18px rgba(6, 8, 20, 0.50), 0 2px 8px rgba(124, 92, 252, 0.14);
  --shadow-lg: 0 18px 46px rgba(6, 8, 20, 0.60), 0 8px 20px rgba(124, 92, 252, 0.18);
  --shadow-xl: 0 34px 76px rgba(6, 8, 20, 0.70), 0 16px 34px rgba(124, 92, 252, 0.22);
  --shadow-glow: 0 0 32px var(--accent-glow);
  --shadow-glow-strong: 0 0 52px var(--accent-glow), 0 0 16px rgba(168, 85, 247, 0.45);
  --shadow-card: 0 8px 30px rgba(6, 8, 20, 0.45), 0 3px 10px rgba(124, 92, 252, 0.13);
  --shadow-card-hover: 0 22px 52px rgba(6, 8, 20, 0.60), 0 10px 24px rgba(124, 92, 252, 0.26);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.02);

  /* --- Стекло (glassmorphism) --- */
  --glass-bg: rgba(19, 26, 50, 0.72);
  --glass-blur: 18px;
  --glass-border: rgba(255, 255, 255, 0.12);

  /* --- Цвета свечений фона (премиальные пятна света, усилены) --- */
  --glow-1: rgba(124, 92, 252, 0.22);
  --glow-2: rgba(168, 85, 247, 0.15);
  --glow-3: rgba(59, 130, 246, 0.12);

  /* --- Фоновый паттерн (по умолчанию — сетка) --- */
  --pattern-color: rgba(124, 92, 252, 0.04);
  --pattern-opacity: 1;
}


/* =====================================================================
   ТЕМА 3 — MIDNIGHT CYAN
   Тёмный графит + cyan/бирюза. Чистый телеком-стиль.
   ===================================================================== */
[data-theme="midnight-cyan"] {
  color-scheme: dark;

  --bg-root: #060d0f;
  --bg-canvas: #0a1417;
  --bg-surface: #0f1e22;
  --bg-surface-2: #16292e;
  --bg-surface-3: #1e363c;
  --bg-elevated: #13252a;
  --bg-input: #0a1619;
  --bg-hover: rgba(6, 182, 212, 0.08);
  --bg-active: rgba(6, 182, 212, 0.16);

  --accent: #06b6d4;
  --accent-hover: #22d3ee;
  --accent-active: #0891b2;
  --accent-dim: #0a8aa3;
  --accent-bright: #5ce5fa;
  --accent-soft: rgba(6, 182, 212, 0.15);
  --accent-glow: rgba(6, 182, 212, 0.55);
  --accent-contrast: #04181c;

  --gradient-accent: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
  --gradient-accent-hover: linear-gradient(135deg, #22d3ee 0%, #38bdf8 100%);
  --gradient-glow: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%);

  --surface-gradient: linear-gradient(160deg, #132a30 0%, #0f1e22 55%, #0b181b 100%);
  --surface-gradient-2: linear-gradient(160deg, #1a3138 0%, #16292e 100%);
  --hero-gradient: radial-gradient(120% 140% at 0% 0%, rgba(6, 182, 212, 0.20) 0%, rgba(6, 182, 212, 0) 55%), linear-gradient(135deg, #132a30 0%, #0a1619 100%);

  --card-highlight: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.65) 25%, rgba(20, 184, 166, 0.90) 50%, rgba(6, 182, 212, 0.65) 75%, transparent 100%);
  --edge-light: inset 0 1px 0 rgba(210, 245, 250, 0.07);

  --text-primary: #e8f4f6;
  --text-secondary: #a0bcc2;
  --text-tertiary: #648089;
  --text-muted: #45595f;
  --text-disabled: #2c3a3e;
  --text-on-accent: #04181c;

  --border-subtle: rgba(210, 245, 250, 0.06);
  --border-default: rgba(210, 245, 250, 0.10);
  --border-strong: rgba(210, 245, 250, 0.16);
  --border-accent: rgba(6, 182, 212, 0.50);

  --ring: 0 0 0 3px rgba(6, 182, 212, 0.32);
  --ring-strong: 0 0 0 3px rgba(6, 182, 212, 0.52);
  --ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.35);

  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.15);
  --success-text: #34d399;
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.15);
  --warning-text: #fbbf24;
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.15);
  --danger-text: #f87171;
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.15);
  --info-text: #7dd3fc;

  --shadow-sm: 0 1px 3px rgba(3, 8, 9, 0.55);
  --shadow-md: 0 6px 18px rgba(3, 8, 9, 0.55), 0 2px 8px rgba(6, 182, 212, 0.14);
  --shadow-lg: 0 18px 46px rgba(3, 8, 9, 0.65), 0 8px 20px rgba(6, 182, 212, 0.20);
  --shadow-xl: 0 34px 76px rgba(3, 8, 9, 0.75), 0 16px 34px rgba(6, 182, 212, 0.24);
  --shadow-glow: 0 0 32px var(--accent-glow);
  --shadow-glow-strong: 0 0 52px var(--accent-glow), 0 0 16px rgba(20, 184, 166, 0.48);
  --shadow-card: 0 8px 30px rgba(3, 8, 9, 0.50), 0 3px 10px rgba(6, 182, 212, 0.15);
  --shadow-card-hover: 0 22px 52px rgba(3, 8, 9, 0.65), 0 10px 24px rgba(6, 182, 212, 0.30);
  --shadow-inset: inset 0 1px 0 rgba(210, 245, 250, 0.06), inset 0 0 0 1px rgba(210, 245, 250, 0.02);

  --glass-bg: rgba(15, 30, 34, 0.72);
  --glass-blur: 18px;
  --glass-border: rgba(210, 245, 250, 0.12);

  --glow-1: rgba(6, 182, 212, 0.20);
  --glow-2: rgba(14, 165, 233, 0.13);
  --glow-3: rgba(20, 184, 166, 0.10);

  --pattern-color: rgba(6, 182, 212, 0.04);
  --pattern-opacity: 1;
}


/* =====================================================================
   ТЕМА 4 — LIGHT PEARL (светлая, премиальная)
   Холодный жемчуг с глубиной: фон ощутимо темнее белых карточек,
   выраженные тени и границы дают объём. Сиреневый акцент.
   ===================================================================== */
[data-theme="light-pearl"] {
  color-scheme: light;

  --bg-root: #dfe3ed;          /* фон страницы — заметно темнее карточек, даёт контраст */
  --bg-canvas: #e7ebf3;        /* фон контентной области */
  --bg-surface: #ffffff;       /* карточки — чистый белый, выделяются на фоне */
  --bg-surface-2: #f1f4fa;     /* вложенные элементы */
  --bg-surface-3: #e3e8f2;     /* hover-фон */
  --bg-elevated: #ffffff;      /* модалки */
  --bg-input: #ffffff;         /* поля ввода */
  --bg-hover: rgba(124, 92, 252, 0.07);
  --bg-active: rgba(124, 92, 252, 0.13);

  --accent: #7c5cfc;
  --accent-hover: #6a4ae8;
  --accent-active: #5d3fd1;
  --accent-dim: #9b86ff;
  --accent-bright: #6a4ae8;
  --accent-soft: rgba(124, 92, 252, 0.13);
  --accent-glow: rgba(124, 92, 252, 0.30);
  --accent-contrast: #ffffff;

  --gradient-accent: linear-gradient(135deg, #7c5cfc 0%, #a855f7 100%);
  --gradient-accent-hover: linear-gradient(135deg, #6a4ae8 0%, #9333ea 100%);
  --gradient-glow: linear-gradient(135deg, #7c5cfc 0%, #ec4899 100%);

  --surface-gradient: linear-gradient(160deg, #ffffff 0%, #f8fafe 60%, #f3f6fc 100%);
  --surface-gradient-2: linear-gradient(160deg, #fbfcfe 0%, #f4f7fc 100%);
  --hero-gradient: radial-gradient(120% 140% at 0% 0%, rgba(124, 92, 252, 0.12) 0%, rgba(124, 92, 252, 0) 55%), linear-gradient(135deg, #ffffff 0%, #f1f4fb 100%);

  --card-highlight: linear-gradient(90deg, transparent 0%, rgba(124, 92, 252, 0.45) 25%, rgba(168, 85, 247, 0.65) 50%, rgba(124, 92, 252, 0.45) 75%, transparent 100%);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --text-primary: #161b2e;
  --text-secondary: #424a66;
  --text-tertiary: #67708c;
  --text-muted: #939bb4;
  --text-disabled: #bcc3d6;
  --text-on-accent: #ffffff;

  --border-subtle: rgba(22, 27, 46, 0.08);
  --border-default: rgba(22, 27, 46, 0.14);
  --border-strong: rgba(22, 27, 46, 0.22);
  --border-accent: rgba(124, 92, 252, 0.48);

  --ring: 0 0 0 3px rgba(124, 92, 252, 0.22);
  --ring-strong: 0 0 0 3px rgba(124, 92, 252, 0.40);
  --ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.25);

  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.13);
  --success-text: #047857;
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.13);
  --warning-text: #b45309;
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.11);
  --danger-text: #b91c1c;
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, 0.11);
  --info-text: #1d4ed8;

  --shadow-sm: 0 1px 3px rgba(22, 27, 46, 0.08);
  --shadow-md: 0 6px 16px rgba(22, 27, 46, 0.10), 0 2px 5px rgba(22, 27, 46, 0.06);
  --shadow-lg: 0 16px 40px rgba(22, 27, 46, 0.14), 0 5px 14px rgba(22, 27, 46, 0.08);
  --shadow-xl: 0 28px 64px rgba(22, 27, 46, 0.18), 0 12px 28px rgba(22, 27, 46, 0.10);
  --shadow-glow: 0 6px 22px var(--accent-glow);
  --shadow-glow-strong: 0 8px 30px var(--accent-glow), 0 2px 12px rgba(168, 85, 247, 0.24);
  --shadow-card: 0 6px 22px rgba(22, 27, 46, 0.10), 0 2px 6px rgba(22, 27, 46, 0.06);
  --shadow-card-hover: 0 18px 44px rgba(22, 27, 46, 0.16), 0 8px 20px rgba(124, 92, 252, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(22, 27, 46, 0.03);

  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-blur: 18px;
  --glass-border: rgba(22, 27, 46, 0.12);

  --glow-1: rgba(124, 92, 252, 0.09);
  --glow-2: rgba(168, 85, 247, 0.06);
  --glow-3: rgba(59, 130, 246, 0.05);

  --pattern-color: rgba(22, 27, 46, 0.05);
  --pattern-opacity: 1;
}


/* =====================================================================
   ФОНОВЫЕ ТЕКСТУРЫ (выбираются в панели оформления)
   theme.js ставит data-bg на <html>, ниже — что показывать для каждой.
   Каждая текстура — SVG data-URI, цвет берётся из --pattern-color темы.
   ===================================================================== */
:root {
  /* Сетка (grid) — по умолчанию */
  --bg-tex-grid:
    linear-gradient(var(--pattern-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-color) 1px, transparent 1px);
  --bg-tex-grid-size: 48px 48px;

  /* Точки (dots) */
  --bg-tex-dots: radial-gradient(var(--pattern-color) 1.4px, transparent 1.4px);
  --bg-tex-dots-size: 28px 28px;

  /* Диагональные линии (lines) */
  --bg-tex-lines: repeating-linear-gradient(
    45deg, var(--pattern-color), var(--pattern-color) 1px,
    transparent 1px, transparent 14px
  );
  --bg-tex-lines-size: auto;
}

/* =====================================================================
   ПЕРЕМЕННЫЕ ФОНА (управляются из JS — theme.js)
   --bg-image устанавливается JS'ом когда юзер выбирает паттерн/картинку.
   ===================================================================== */
:root {
  --bg-image: none;            /* SVG-паттерн или url(картинки) */
  --bg-image-size: cover;      /* cover | auto | повтор паттерна */
  --bg-image-blend: normal;    /* режим наложения */
  --bg-overlay: rgba(0, 0, 0, 0); /* затемнение поверх картинки */
}