/* /opt/skynet-portal/app/static/css/tokens.css */
/* v0.2.0 — расширенная палитра: 8 акцентов, 6 фонов-текстур, glass-переменные */
/* 30.05.2026: Dark Violet (default), Dark Gold, Midnight Cyan + кастомизация */

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

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

  /* --- Высота строки --- */
  --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 */

  /* --- Скругления --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --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);

  /* --- Размеры layout --- */
  --sidebar-width: 264px;
  --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-soft: rgba(124, 92, 252, 0.15);  /* мягкий фон акцента */
  --accent-glow: rgba(124, 92, 252, 0.45);  /* свечение */
  --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%);

  /* --- Текст --- */
  --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);    /* акцентная */

  /* --- Семантические цвета (статусы) --- */
  --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 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 24px var(--accent-glow);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.25);

  /* --- Стекло (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.18);
  --glow-2: rgba(168, 85, 247, 0.12);
  --glow-3: rgba(59, 130, 246, 0.10);

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

/* =====================================================================
   ТЕМА 2 — DARK GOLD
   Глубокий тёмный + золото. Премиально, дорого.
   ===================================================================== */
[data-theme="dark-gold"] {
  color-scheme: dark;

  --bg-root: #0c0a07;
  --bg-canvas: #14110b;
  --bg-surface: #1d1810;
  --bg-surface-2: #272016;
  --bg-surface-3: #332a1d;
  --bg-elevated: #221c12;
  --bg-input: #16120b;
  --bg-hover: rgba(232, 185, 74, 0.08);
  --bg-active: rgba(232, 185, 74, 0.16);

  --accent: #e8b94a;
  --accent-hover: #f5c95e;
  --accent-active: #d4a838;
  --accent-soft: rgba(232, 185, 74, 0.15);
  --accent-glow: rgba(232, 185, 74, 0.45);
  --accent-contrast: #1a1408;

  --gradient-accent: linear-gradient(135deg, #e8b94a 0%, #f5a623 100%);
  --gradient-accent-hover: linear-gradient(135deg, #f5c95e 0%, #ffb838 100%);
  --gradient-glow: linear-gradient(135deg, #e8b94a 0%, #ff8c42 100%);

  --text-primary: #f7f3ea;
  --text-secondary: #cfc4a8;
  --text-tertiary: #998e6b;
  --text-muted: #6b6147;
  --text-disabled: #453d2c;
  --text-on-accent: #1a1408;

  --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(232, 185, 74, 0.50);

  --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 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 24px var(--accent-glow);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);

  --glass-bg: rgba(29, 24, 16, 0.72);
  --glass-blur: 18px;
  --glass-border: rgba(255, 255, 255, 0.12);

  --glow-1: rgba(232, 185, 74, 0.16);
  --glow-2: rgba(245, 166, 35, 0.10);
  --glow-3: rgba(255, 140, 66, 0.08);

  --pattern-color: rgba(232, 185, 74, 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-soft: rgba(6, 182, 212, 0.15);
  --accent-glow: rgba(6, 182, 212, 0.45);
  --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%);

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

  --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(6, 182, 212, 0.50);

  --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 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 24px var(--accent-glow);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);

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

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

  --pattern-color: rgba(6, 182, 212, 0.04);
  --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); /* затемнение поверх картинки */
}