/* ==========================================================================
   Counter-Strike Universe — design tokens
   Единственный источник значений. HEX в разметке и компонентах не пишем.
   Основание: 2.txt (design-spec), сверено с 1cs.png.
   ========================================================================== */

:root {
  /* --- Поверхности и текст ------------------------------------------------ */
  --bg:              #F6F7F4;
  --surface:         #FFFFFF;
  --surface-soft:    #EEF0EC;   /* заливки, зебра таблиц */
  --surface-warm:    #F7F4EE;   /* тёплые блоки, история */
  --border:          #E1E4DE;
  --border-strong:   #D2D7CF;

  --text:            #181B18;
  --text-secondary:  #687069;
  --text-muted:      #979D97;
  --text-inverse:    #F2F4F0;

  /* --- Акцент: карты, основное действие ----------------------------------- */
  --olive:           #59734A;
  --olive-hover:     #4A623F;
  --olive-active:    #3F5436;
  --olive-soft:      #EDF3E9;
  --olive-border:    #C9DBBE;

  /* --- Workshop ------------------------------------------------------------ */
  --orange:          #D98A3C;
  --orange-hover:    #C4762C;
  --orange-soft:     #FFF1E3;
  --orange-border:   #F2D6B4;

  /* --- Esports: матчи, команды, турниры ------------------------------------ */
  --steel:           #4A718E;
  --steel-hover:     #3E6079;
  --steel-soft:      #EDF3F8;
  --steel-border:    #C6D9E6;

  /* --- Косметика: скины, кейсы, стикеры ------------------------------------ */
  --violet:          #76688E;
  --violet-soft:     #F1EEF6;
  --violet-border:   #DAD2E6;

  /* --- Серверы ------------------------------------------------------------- */
  --green:           #4F7D5E;
  --green-soft:      #EAF3ED;
  --green-border:    #C4DCCD;

  /* --- Статусы ------------------------------------------------------------- */
  --red:             #CE5252;
  --red-hover:       #B84343;
  --red-soft:        #FBEDED;
  --red-border:      #F0CFCF;

  --amber:           #C8912F;
  --amber-soft:      #FBF2DF;

  /* --- Тёмные функциональные зоны ------------------------------------------ */
  --dark-workspace:  #212A2B;   /* tactical map */
  --dark-hero:       #262F30;   /* player / workshop hero */
  --dark-admin:      #1E282E;   /* сайдбар админки */
  --dark-elevated:   #2C3637;   /* панели внутри тёмной зоны */
  --dark-border:     #384344;
  --dark-text:       #E7EAE5;
  --dark-text-muted: #9AA5A2;

  /* --- Акцент раздела (переопределяется на страницах) ---------------------- */
  --accent:          var(--olive);
  --accent-hover:    var(--olive-hover);
  --accent-soft:     var(--olive-soft);
  --accent-border:   var(--olive-border);

  /* --- Типографика --------------------------------------------------------- */
  --font-sans: "Manrope", "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-h1:      3.25rem;   /* 52px */
  --fs-h2:      2.125rem;  /* 34px */
  --fs-h3:      1.5rem;    /* 24px */
  --fs-h4:      1.1875rem; /* 19px */
  --fs-body:    0.9688rem; /* 15.5px */
  --fs-small:   0.8438rem; /* 13.5px */
  --fs-tiny:    0.75rem;   /* 12px */

  --lh-tight:   1.14;
  --lh-heading: 1.25;
  --lh-body:    1.6;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* --- Скругления ---------------------------------------------------------- */
  --r-xs:     6px;
  --r-sm:     8px;
  --r-input:  10px;
  --r-btn:    11px;
  --r-card:   15px;
  --r-panel:  20px;
  --r-hero:   24px;
  --r-pill:   999px;

  /* --- Тени ---------------------------------------------------------------- */
  --shadow-card:     0 5px 20px rgba(20, 28, 20, .055);
  --shadow-elevated: 0 12px 34px rgba(22, 30, 22, .09);
  --shadow-overlay:  0 24px 60px rgba(18, 26, 18, .16);
  --shadow-focus:    0 0 0 3px rgba(89, 115, 74, .22);

  /* --- Отступы (шаг 4px) --------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* --- Сетка и слои -------------------------------------------------------- */
  --container:    1420px;
  --gutter:       24px;
  --grid-gap:     22px;
  --header-h:     70px;
  --bottom-nav-h: 62px;

  --z-header:  100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal:   400;

  /* --- Движение ------------------------------------------------------------ */
  --ease:        cubic-bezier(.4, .16, .18, 1);
  --dur-fast:    .12s;
  --dur:         .18s;
  --dur-slow:    .32s;
}

/* Акценты разделов: вешаются на <body> или на секцию. */
[data-accent="esports"] {
  --accent: var(--steel);  --accent-hover: var(--steel-hover);
  --accent-soft: var(--steel-soft); --accent-border: var(--steel-border);
}
[data-accent="workshop"] {
  --accent: var(--orange); --accent-hover: var(--orange-hover);
  --accent-soft: var(--orange-soft); --accent-border: var(--orange-border);
}
[data-accent="cosmetics"] {
  --accent: var(--violet); --accent-hover: #665A7C;
  --accent-soft: var(--violet-soft); --accent-border: var(--violet-border);
}
[data-accent="servers"] {
  --accent: var(--green); --accent-hover: #436C50;
  --accent-soft: var(--green-soft); --accent-border: var(--green-border);
}
[data-accent="history"] {
  --accent: #7A7266; --accent-hover: #665F55;
  --accent-soft: var(--surface-warm); --accent-border: #E4DED2;
}

@media (max-width: 1024px) {
  :root {
    --fs-h1: 2.5rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.3125rem;
    --gutter: 20px;
    --grid-gap: 18px;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 2rem;      /* 32px */
    --fs-h2: 1.5rem;
    --fs-h4: 1.0625rem;
    --gutter: 16px;
    --grid-gap: 14px;
    --header-h: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; }
}