/* ═══════════════════════════════════════════════════════════════════════
   M.Y. STUDIO — DESIGN SYSTEM (единый источник истины)
   ───────────────────────────────────────────────────────────────────────
   ⚠️  Это КАНОНИЧЕСКИЙ файл дизайна для всех проектов:
       • mys_manager (CRM)   • mys_agency (Portal)   • mys_website (Site)

   Хостится на R2 (единый URL), подключается ПЕРВЫМ во всех трёх проектах,
   ДО локального styles.css каждого проекта.

   ПРАВИЛО РЕДАКТИРОВАНИЯ:
   1. Менять только здесь (master).
   2. Перезалить на R2.
   3. Поднять ?v=N в <link> во всех трёх index.html.

   Тема: СВЕТЛАЯ (канон). Тёмная тема — ТОЛЬКО в CRM, локально, в его
   styles.css (@media prefers-color-scheme: dark переопределяет токены ниже).
   В общий файл dark НЕ добавлять — иначе Agency/Web получат dark и сломаются.

   Версия: 1  ·  Обновлено: 2026-06-11
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. КАНОНИЧЕСКИЕ ТОКЕНЫ (нейминг Agency как стандарт) ───────────────── */
:root {
  /* Акцент — золото M.Y. STUDIO */
  --gold:          #C9A96E;
  --gold-light:    #D9BE8C;   /* hover */
  --gold-dark:     #A8813F;   /* активные/тёмные акценты (из web) */
  --gold-tint:     rgba(201,169,110,0.18);  /* фокус-кольца, подложки */

  /* Фоны */
  --bg-primary:    #ffffff;
  --bg-secondary:  #f5f5f5;
  --bg-card:       #f9f9f9;
  --bg-card-hover: #f0f0f0;

  /* Текст */
  --text-primary:  #1a1a1a;
  --text-secondary:#555555;
  --text-muted:    #999999;

  /* Рамки */
  --border:        rgba(0,0,0,0.1);
  --border-hover:  rgba(201,169,110,0.5);

  /* Семантика статусов */
  --color-danger:  #ff3b30;
  --color-success: #34c759;
  --color-warning: #ff9500;

  /* Скругления */
  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     20px;

  /* Тени */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.18);

  /* Поля ввода: 16px на мобиле (iOS no-zoom), 13px десктоп — задаёт проект */
  --input-fs:      16px;

  --transition:    0.18s ease;
}

/* ── 2. АЛИАСЫ СОВМЕСТИМОСТИ ────────────────────────────────────────────
   Чтобы существующий CSS каждого проекта работал без переписывания всех
   ссылок. Каждый проект отключает дубли своих токенов в локальном styles.css
   при переходе на этот файл (см. фазы B/C/D в плане). */

:root {
  /* CRM (mys_manager) — нейминг --color-* */
  --color-accent:               var(--gold);
  --color-accent-tint:          var(--gold-tint);
  --color-background-primary:   var(--bg-primary);
  --color-background-secondary: var(--bg-secondary);
  --color-background-tertiary:  var(--bg-primary);
  --color-background-elevated:  var(--bg-primary);
  --color-text-primary:         var(--text-primary);
  --color-text-secondary:       var(--text-secondary);
  --color-text-tertiary:        var(--text-muted);
  --color-border:               var(--border);
  --color-border-secondary:     var(--border);
  --color-border-tertiary:      var(--border);
  --color-red:                  var(--color-danger);
  --color-green:                var(--color-success);
  --color-orange:               var(--color-warning);
  --border-radius-md:           var(--radius);
  --border-radius-lg:           var(--radius-lg);

  /* Web (mys_website) — нейминг --grey-* */
  --grey-bg:    var(--bg-secondary);
  --grey-mid:   var(--border);
  --grey-text:  var(--text-secondary);
  --grey-light: var(--text-muted);
  --radius-md:  var(--radius);

  /* Agency (mys_agency) — нейминг уже канонический (--gold/--bg-*),
     дополнительно: */
  --border-color: var(--border);
}

/* ── 3. БАЗОВЫЙ СТИЛЬ ПОЛЕЙ (единый для всех модулей всех проектов) ──────
   Глобальный селектор: любой input/select/textarea наследует Agency-стиль
   с рамкой, независимо от контейнера и класса. Размеры/ширину задают
   локальные правила проектов. */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
  font-size: var(--input-fs);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-tint);
}

textarea { resize: vertical; min-height: 60px; }

::placeholder { color: var(--text-muted); }

/* Кастомный шеврон для select (appearance:none скрывает нативный) */
select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}