/* ============================================================
   css/tokens.css — Amanah AI Design Tokens (P2-1)
   Единый источник CSS-переменных для всего проекта.
   Все остальные CSS-файлы ДОЛЖНЫ подключать этот файл ПЕРВЫМ
   и могут использовать эти переменные без дублирования :root.

   Usage: <link rel="stylesheet" href="css/tokens.css" />
   (до style.css, dashboard.css, admin.css)
   ============================================================ */

:root {

  /* ── Brand colours ────────────────────────────────────── */
  --teal:          #0E7C66;
  --teal-d:        #0A5C4E;
  --teal-l:        #16A085;
  --teal-pale:     #E8F5F2;
  --teal-bg:       rgba(14, 124, 102, .08);

  --gold:          #C9A84C;
  --gold-l:        #E8C96A;
  --gold-d:        #92650A;
  --gold-pale:     #FDF8EC;
  --gold-bg:       rgba(201, 168, 76, .10);

  /* ── Semantic colours ─────────────────────────────────── */
  --red:           #DC3545;
  --red-pale:      #FFF2F3;
  --red-bg:        rgba(220, 53, 69, .08);

  --orange:        #E67E22;
  --orange-pale:   #FEF4E8;
  --orange-bg:     rgba(230, 126, 34, .08);

  --green:         #27AE60;
  --green-pale:    #EAF7EF;
  --green-bg:      rgba(39, 174, 96, .08);

  --blue:          #3B82F6;
  --blue-pale:     #EFF6FF;
  --blue-bg:       rgba(59, 130, 246, .08);

  --purple:        #8E44AD;
  --purple-pale:   #F5EEF8;
  --purple-bg:     rgba(142, 68, 173, .08);

  /* ── Surfaces ─────────────────────────────────────────── */
  --bg:            #FFFFFF;
  --bg-alt:        #F7F9FC;
  --bg-s:          #FFFFFF;   /* card surface */
  --bg-c:          #FFFFFF;   /* content area */
  --bg-h:          #F0F4F8;   /* hover state */
  --bg-i:          #F7F9FC;   /* input background */
  --bg-dark:       #0D1117;

  --border:        #E2E8F0;
  --border-l:      #EDF2F7;

  --white:         #FFFFFF;

  /* ── Text ─────────────────────────────────────────────── */
  --txt:           #1A202C;
  --txt-m:         #4A5568;
  --txt-s:         #718096;
  --txt-l:         #A0AEC0;

  /* ── Typography ───────────────────────────────────────── */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:  'Playfair Display', Georgia, serif;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width:     1140px;
  --section-pad:   72px;
  --container-pad: 24px;

  /* ── Border radius ────────────────────────────────────── */
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --radius-full:   100px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 50px rgba(0,0,0,.12);

  /* ── Transitions ──────────────────────────────────────── */
  --transition:      all .22s ease;
  --transition-fast: all .15s ease;
  --transition-slow: all .35s ease;

  /* ── Z-index scale ────────────────────────────────────── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-modal:   500;
  --z-toast:   900;

  /* ── Legacy aliases (backward compat — не удалять) ─────── */
  --color-teal:        var(--teal);
  --color-teal-light:  var(--teal-l);
  --color-teal-pale:   var(--teal-pale);
  --color-teal-dark:   var(--teal-d);
  --color-gold:        var(--gold);
  --color-gold-light:  var(--gold-l);
  --color-gold-pale:   var(--gold-pale);
  --color-red:         var(--red);
  --color-red-pale:    var(--red-pale);
  --color-orange:      var(--orange);
  --color-orange-pale: var(--orange-pale);
  --color-green:       var(--green);
  --color-green-pale:  var(--green-pale);
  --color-purple:      var(--purple);
  --color-purple-pale: var(--purple-pale);
  --color-bg:          var(--bg);
  --color-bg-alt:      var(--bg-alt);
  --color-bg-dark:     var(--bg-dark);
  --color-border:      var(--border);
  --color-text:        var(--txt);
  --color-text-muted:  var(--txt-s);
  --color-text-light:  var(--txt-l);
}

/*
  ── MIGRATION GUIDE ───────────────────────────────────────────
  Для удаления дублирующихся :root-блоков из других CSS-файлов:

  1. style.css     → удалить :root { … } (строки 10–85),
                     добавить в <head>: <link rel="stylesheet" href="css/tokens.css">
                     ДО <link rel="stylesheet" href="css/style.css">

  2. dashboard.css → удалить :root { … } (строки 6–80),
                     убедиться что tokens.css подключён в dashboard.html

  3. admin.css     → удалить :root { … } (строки 7–75),
                     убедиться что tokens.css подключён в admin.html

  Пока оба :root сосуществуют — tokens.css должен идти ПЕРВЫМ.
  CSS-cascade: при одинаковых переменных побеждает последнее объявление,
  поэтому tokens.css как первый файл будет перекрыт специфичными значениями
  в dashboard.css / admin.css если они там переопределены.
  ────────────────────────────────────────────────────────────── */