/* =============================================================
 * Mission Control · design tokens
 * -------------------------------------------------------------
 * Tokens are declared on `.ds` (the opt-in class on <body>), NOT on
 * :root. A global :root block would still win the cascade over a
 * page's own :root — this file is injected from <body> via
 * board_header.html, i.e. AFTER each page's <head> styles — and
 * would silently hijack same-named variables on the 20 templates
 * that declare their own token set (confirmed: toggles.html
 * --cyan/--pink). Scoping to .ds makes non-opted-in pages inert.
 *
 * All visual base styling is scoped to `.ds` on <body> so 40+
 * existing standalone templates cannot regress when this file
 * is loaded globally through board_header.html.
 * ============================================================= */

/* Both scopes get the variables. `.ds` is the first-generation
 * design system; `.mc` is the Tailwind-built one on base.html. During
 * the migration a page is one or the other, but shared partials — the
 * config modal, for instance — are authored against these variable
 * names and must resolve under either root. Only the TOKENS are
 * shared: the base visual rules further down stay `.ds`-only, so the
 * two systems never paint the same element twice.
 */
.ds,
.mc {
  /* Backgrounds */
  --bg-void:  #07061A;
  --bg-deep:  #0B0A22;

  /* Glass surfaces */
  --surface-1: rgba(22, 20, 48, .55);
  --surface-2: rgba(28, 26, 58, .72);
  --surface-3: rgba(36, 33, 72, .88);

  /* Strokes */
  --stroke-1:      rgba(255, 255, 255, .07);
  --stroke-2:      rgba(255, 255, 255, .12);
  --stroke-accent: rgba(124,  92, 255, .35);

  /* Text tiers — txt-3 is meant for 11–12px labels only */
  --txt-1: #F2F1FA;
  --txt-2: #A9A6C9;
  --txt-3:   #817DA8;

  /* Semantic accents */
  /* Не литералы, а ссылки на новый слой токенов (src/app.css,
   * `:root`). Иначе легаси-фрагмент внутри мигрированной страницы —
   * а он там будет, в этом и смысл миграции по одной — остался бы
   * фиолетовым при любом выбранном акценте. Запасное значение после
   * запятой на случай, если app.css почему-то не доехал: цвет тот
   * же, что был здесь раньше.
   *
   * Обратная зависимость (новый слой смотрел бы сюда) была бы
   * ошибкой: этот файл — первое поколение, он подлежит удалению
   * вместе с последней немигрированной страницей. */
  --accent:   rgb(var(--mc-accent-500, 124 92 255));
  --accent-2: rgb(var(--mc-accent-400, 167 139 250));
  --cyan:     #22D3EE;
  --green:    #34D399;
  --amber:    #FBBF24;
  --red:      #F87171;
  --pink:     #F472B6;

  /* Typography stacks */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --r-sm:  8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Spacing (8-based, plus 4 for tight) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-14: 56px;

  /* Effects */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, .45);
  --glow-accent: 0 0 0 1px rgba(124, 92, 255, .25),
                 0 8px 30px -8px rgba(124, 92, 255, .5);
  --blur: 14px;

  /* Motion */
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 420ms;
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  /* Layout */
  --container: min(1600px, 100% - 64px);
  /* Actual header height, sourced from
   * static/css/components/board_header.css :59  →  --header-height: 80px */
  --header-h: 80px;
}

/* =============================================================
 * Base layer — ONLY takes effect on <body class="ds">.
 * Tailwind Play-CDN's `preflight:false` means we own the reset
 * here (but only for opt-in .ds subtrees).
 * ============================================================= */
.ds {
  background: var(--bg-void);
  color: var(--txt-1);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  margin: 0;
}
.ds *,
.ds *::before,
.ds *::after { box-sizing: border-box; }

.ds h1,
.ds h2,
.ds h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--txt-1);
  letter-spacing: -.01em;
}
.ds h1 { font-size: 24px; line-height: 1.15; }
.ds h2 { font-size: 18px; line-height: 1.2;  }
.ds h3 { font-size: 15px; line-height: 1.25; }

.ds p { margin: 0; color: var(--txt-2); }

.ds a { color: var(--accent-2); text-decoration: none; }
.ds a:hover { color: var(--accent); }

/* Number/monospace helpers */
.ds .num  { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.ds .mono { font-family: var(--font-mono);    letter-spacing: .02em; }

/* Selection + focus */
.ds ::selection { background: rgba(124, 92, 255, .35); color: #fff; }
.ds :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Scrollbars — only inside .ds subtree */
.ds::-webkit-scrollbar,
.ds *::-webkit-scrollbar { width: 10px; height: 10px; }
.ds::-webkit-scrollbar-track,
.ds *::-webkit-scrollbar-track { background: transparent; }
.ds::-webkit-scrollbar-thumb,
.ds *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .10);
  border-radius: 999px;
}
.ds::-webkit-scrollbar-thumb:hover,
.ds *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .18); }

/* Container — safe outside .ds too (no colors), but harmless */
.ds-container { width: var(--container); margin-inline: auto; }

/* Starfield z-index cooperation: canvas sits at z=0, content at z=1 */
.ds > *:not(#mc-starfield) { position: relative; z-index: 1; }

/* Reclaimed Tailwind utilities (see optional-step report — Play-CDN
 * dropped from CCA templates; these 3 utilities were the only ones
 * actually used and are reintroduced here, scoped to .ds). */
.ds .max-w-7xl { max-width: 80rem; }
.ds .mx-auto   { margin-left: auto; margin-right: auto; }
.ds .flex-1    { flex: 1 1 0%; }

/* Alpine.js FOUC guard — every page that uses `x-show` / `x-if` /
 * `x-transition` needs this rule so elements that will be hidden
 * post-init don't flash their initial rendered state. Kept
 * un-scoped (matches Alpine's own recommendation) so a page that
 * loads the design-system also gets FOUC protection without
 * having to remember a duplicate rule locally. */
[x-cloak] { display: none !important; }