/* ============================================================================
   cardgen.ru — дизайн-токены v2 «Noir Salon»
   ----------------------------------------------------------------------------
   Визуальный язык: закрытый клуб для высоких ставок. Глубокий чёрно-зелёный,
   шампанское золото, слоновая кость, тонкие волосяные линии, зерно плёнки.
   Никаких «веб-панелек»: поверхности — это свет и тень, а не рамки.

   Правило: экраны не хардкодят цвета и шрифты. Только переменные отсюда.
   ========================================================================== */

:root {
  /* ── чернила: база и поверхности ─────────────────────────────────────── */
  --ink-0: #04060A;      /* абсолютная глубина, фон сцены */
  --ink-1: #070A0E;      /* подложка */
  --ink-2: #0B0F14;      /* панель */
  --ink-3: #11161C;      /* приподнятая панель */
  --ink-4: #1A2129;      /* граница-тень, «утопленная» поверхность */

  /* совместимость с v1 (старые имена остаются валидными) */
  --bg: var(--ink-1);
  --bg-2: var(--ink-2);
  --panel: var(--ink-2);
  --panel-2: var(--ink-3);

  /* ── сукно ───────────────────────────────────────────────────────────── */
  --felt-deep: #05201A;
  --felt: #07352A;
  --felt-lit: #0A4A38;
  --felt-edge: #031410;
  --felt-line: #14624A;

  /* ── золото: от бледного шампанского к старому металлу ───────────────── */
  --gold-100: #FBF0D6;
  --gold-200: #F0DCAE;
  --gold-300: #E2C589;
  --gold-400: #CDA962;
  --gold-500: #B08A46;
  --gold-600: #8A6A33;
  --gold-700: #5E4620;

  /* совместимость с v1 */
  --gold: var(--gold-400);
  --gold-2: var(--gold-300);
  --gold-dim: var(--gold-600);

  /* ── слоновая кость: текст ───────────────────────────────────────────── */
  --ivory: #F6F1E7;
  --ivory-2: #DCD5C7;
  --ivory-3: #A9A294;

  /* совместимость с v1 */
  --text: var(--ivory);
  --muted: var(--ivory-2);
  --dim: var(--ivory-3);

  /* ── акценты состояний ───────────────────────────────────────────────── */
  --ok: #4FBFA0;
  --warn: #D9A15C;
  --bad: #C4554B;
  --oxblood: #7E322C;

  /* масти: не чистые цвета, а «печатные» — как на хорошей бумаге */
  --suit-red: #C24A42;
  --suit-black: #2A2A28;

  /* ── волосяные линии и тени ──────────────────────────────────────────── */
  --hair: rgba(246, 241, 231, .10);
  --hair-strong: rgba(246, 241, 231, .17);
  --hair-gold: rgba(205, 169, 98, .34);
  --hair-gold-soft: rgba(205, 169, 98, .18);

  /* совместимость с v1 */
  --border: var(--hair);
  --border-2: var(--hair-strong);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .55);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .55);
  --shadow-3: 0 28px 70px rgba(0, 0, 0, .68);
  --shadow-gold: 0 0 0 1px var(--hair-gold), 0 12px 40px rgba(176, 138, 70, .14);

  /* ── типографика ─────────────────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", "Century Schoolbook L", "P052", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Inter", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* трекинг: дисплей плотный, микролейблы разряженные */
  --track-display: -0.022em;
  --track-label: 0.22em;
  --track-label-tight: 0.14em;

  /* ── геометрия ───────────────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ── движение ────────────────────────────────────────────────────────── */
  --t-fast: 130ms;
  --t-med: 260ms;
  --t-slow: 520ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* ── слои ────────────────────────────────────────────────────────────── */
  --z-felt: 1;
  --z-seats: 10;
  --z-hud: 40;
  --z-banner: 60;
  --z-modal: 80;
}

/* ============================================================================
   База
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  margin: 0;
  padding: 0;
  background: var(--ink-0);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background: var(--ink-0);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled { cursor: default; }

:focus-visible {
  outline: 1px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: rgba(205, 169, 98, .28);
  color: var(--ivory);
}

/* тонкий скроллбар */
* { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: #2A333D; }

/* ============================================================================
   Утилиты
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hidden { display: none !important; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ivory-2); }
.dim { color: var(--ivory-3); }
.gold { color: var(--gold-300); }

/* Микролейбл: разряженный капс — подпись, а не текст */
.label {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ivory-3);
}

/* Дисплейная строка: антиква, тонкий вес */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--track-display);
  line-height: .95;
}

/* Золотая фольга: градиент по тексту */
.foil {
  background: linear-gradient(
    168deg,
    var(--gold-100) 0%,
    var(--gold-300) 34%,
    var(--gold-500) 62%,
    var(--gold-200) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Волосяная линия с растворением к краям */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hair-gold-soft) 18%,
    var(--hair-gold) 50%,
    var(--hair-gold-soft) 82%,
    transparent
  );
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}