/*  ================================================================
    ServiceMaster — Global Design System Tokens
    ================================================================
    Единственный источник истины для CSS-переменных, reset-стилей,
    общих утилит и скроллбаров. Подключается ДО всех остальных CSS.

    Порядок подключения:
      1. global.css   (этот файл — токены)
      2. layouts/style.css  (компоненты layout: header, footer, nav, modals)
      3. landing.css / profile.css / admin — стили конкретных страниц
    ================================================================ */

/* === 1. CSS RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }
ul, ol { list-style: none; }

/* === 2. ДИЗАЙН-ТОКЕНЫ (Light Mode) === */
:root {
  color-scheme: light dark;

  /* Brand */
  --sm-primary: #4A00FF;
  --sm-primary-light: rgba(74, 0, 255, 0.08);
  --sm-primary-hover: #3A00CC;
  --sm-error: #ff3b30;
  --sm-success: #34c759;

  /* Typography */
  --sm-text: #1d1d1f;
  --sm-text-muted: #86868b;
  --text-primary: #1d1d1f;
  --text-secondary: #86868b;

  /* Backgrounds */
  --bg-color: #f0f0f5;
  --card-bg: #ffffff;
  --sub-card-bg: #f5f5f7;
  --slider-bg: #f5f5f7;

  /* Borders & Shadows */
  --border-color: rgba(0, 0, 0, 0.05);
  --card-border: 1px solid rgba(0, 0, 0, 0.05);
  --card-hover-shadow: 0 8px 17px rgba(74, 0, 255, 0.08);

  /* Inputs */
  --input-bg: rgba(0, 0, 0, 0.04);
  --input-border: 1px solid rgba(0, 0, 0, 0.08);
  --sm-option-bg: #ffffff;

  /* Glassmorphism */
  --sm-blur: 10px;
  --sm-saturate: 180%;
  --sm-bg-glass: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 100%);
  --sm-border-glass: 1px solid rgba(255,255,255,0.5);
  --sm-shadow-glass: 0 10px 24px -4px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.8);

  /* Misc */
  --toggle-bg: rgba(0, 0, 0, 0.05);
  --logo-text-fill: #1d1d1f;
  --logo-circle-fill: #4A00FF;
  --logo-icon-fill: #ffffff;
  --star-inactive: #e5e5ea;
  --star-active: #FFD60A;
  --ios-spring: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Accent Colors (aliases) */
  --accent-blue: #3b82f6;
  --accent-emerald: #10b981;

  /* Carousel / Showcase */
  --sm-carousel-card: #ffffff;
  --sm-carousel-photo-bg: #F1F5F9;
  --sm-carousel-icon-color: #94A3B8;
  --sm-carousel-icon-hover: #1E293B;
  --sm-carousel-purple: #4A00FF;
  --sm-carousel-tooltip: rgba(15, 23, 42, 0.8);
  --sm-carousel-border-tooltip: rgba(255, 255, 255, 0.08);
}

/* === 3. DARK MODE === */
[data-theme="dark"],
body.dark-theme {
  --sm-text: #f5f5f7;
  --sm-text-muted: #a1a1a6;
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;

  --bg-color: #0a0a0c;
  --card-bg: #1c1c1e;
  --sub-card-bg: #2c2c2e;
  --slider-bg: #2c2c2e;

  --border-color: rgba(255, 255, 255, 0.05);
  --card-border: 1px solid rgba(255, 255, 255, 0.05);
  --card-hover-shadow: 0 8px 21px rgba(0, 0, 0, 0.3);

  --input-bg: rgba(255, 255, 255, 0.06);
  --input-border: 1px solid rgba(255, 255, 255, 0.1);
  --sm-option-bg: #1c1c1e;
  --star-inactive: #3a3a3c;

  --sm-bg-glass: linear-gradient(135deg, rgba(30,30,35,0.8) 0%, rgba(10,10,15,0.5) 100%);
  --sm-border-glass: 1px solid rgba(255, 255, 255, 0.1);
  --sm-shadow-glass: 0 10px 28px -4px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.05);

  --toggle-bg: rgba(255, 255, 255, 0.1);
  --logo-text-fill: #f5f5f7;

  --sm-carousel-card: #1C1C1E;
  --sm-carousel-photo-bg: #2C2C2E;
  --sm-carousel-icon-color: #48484A;
  --sm-carousel-icon-hover: #FFFFFF;

  --accent-blue: #2563eb;
  --accent-emerald: #059669;
}

/* === 4. УТИЛИТЫ === */
.glass {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 3px -1px rgba(0, 0, 0, 0.06);
}

.text-slate-400 { color: var(--text-secondary); }
.text-white { color: var(--text-primary); }
.sm-hidden { display: none !important; }

/* === 5. КАСТОМНЫЙ СКРОЛЛБАР === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }