/* ============================================================================
   PlayForge design tokens — the PLATFORM identity (never a tenant brand).

   PlayForge is part of the Tribastion product family (CART, Reach, PentestPro,
   Phishkit, Control). Those apps share one design system: magenta #EC008C brand,
   indigo secondary, Inter body / Space Grotesk display / JetBrains Mono code,
   light by default with an explicit dark toggle. This file adopts exactly those
   values so the studio looks like a sibling of the other consoles.

   Two naming schemes live here on purpose:
     --brand / --surface / --text …   the estate's own token names, so markup
                                      copied between apps behaves identically;
     --c-* / --r-* / --sp-* / --grad-* PlayForge's original names, now ALIASES of
                                      the estate tokens — every component in
                                      platform.css, admin.css, builder.css and
                                      site-pages.css retints from this file alone.

   NOT covered here: the in-game canvas. A variant's colours come from
   App\Services\ThemeResolver and belong to the tenant (Aurora red at Christmas,
   Bluepeak amber at Diwali). Platform chrome is Tribastion; the game is theirs.
   ============================================================================ */

:root {
  /* ---- Estate brand ---- */
  --brand: #EC008C;
  --brand-600: #D4007E;
  --brand-700: #A3238E;
  --brand-tint: rgba(236, 0, 140, 0.10);
  --brand-tint-2: rgba(236, 0, 140, 0.16);
  --secondary: #6366F1;
  --secondary-tint: rgba(99, 102, 241, 0.14);

  /* ---- Light surfaces (the default) ---- */
  --bg: #F5F6F8;
  --bg-2: #EEF1F5;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --elev: #FFFFFF;
  --border: #E3E8EF;
  --border-strong: #D2D9E3;

  --text: #1B2430;
  --text-dim: #5A6675;
  --text-faint: #8993A2;
  --on-brand: #FFFFFF;

  /* ---- Semantic ---- */
  --crit: #DC2626;
  --high: #EA580C;
  --med: #EAB308;
  --low: #0EA5E9;
  --info: #0EA5E9;
  --ok: #16A34A;
  --warn: #EA580C;
  --bad: #DC2626;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
  --ring: 0 0 0 3px rgba(236, 0, 140, 0.28);

  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', var(--sans);

  color-scheme: light;

  /* ---- PlayForge aliases (everything below resolves to the tokens above) ---- */
  --font-sans: var(--sans);
  --font-display: var(--display);
  --font-mono: var(--mono);

  --c-bg: var(--bg);
  --c-bg-2: var(--bg-2);
  --c-surface: var(--surface);
  --c-surface-2: var(--surface-2);
  --c-border: var(--border);
  --c-border-strong: var(--border-strong);
  --c-text: var(--text);
  --c-text-2: var(--text-dim);
  --c-text-3: var(--text-faint);
  --c-primary: var(--brand);
  --c-primary-2: var(--brand);
  --c-secondary: var(--secondary);
  --c-accent: var(--high);
  --c-success: var(--ok);
  --c-warning: var(--warn);
  --c-danger: var(--bad);
  --c-on-primary: var(--on-brand);

  /* Tints used by badges, focus rings and glows — brand-derived, never hardcoded. */
  --tint-primary: var(--brand-tint);
  --tint-primary-2: var(--brand-tint-2);
  --tint-secondary: var(--secondary-tint);
  --tint-accent: rgba(234, 88, 12, 0.14);
  --tint-success: rgba(22, 163, 74, 0.14);
  --tint-warning: rgba(234, 88, 12, 0.14);
  --tint-danger: rgba(220, 38, 38, 0.12);

  --grad-hero:
    radial-gradient(1100px 560px at 8% -12%, rgba(236, 0, 140, 0.22), transparent 62%),
    radial-gradient(900px 500px at 100% 0%, rgba(99, 102, 241, 0.20), transparent 58%),
    radial-gradient(700px 420px at 50% 118%, rgba(163, 35, 142, 0.14), transparent 60%);
  --grad-primary: linear-gradient(135deg, #A3238E 0%, #EC008C 100%);
  --grad-card: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35));

  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow);
  --shadow-glow: 0 0 0 1px rgba(236, 0, 140, 0.35), 0 12px 34px rgba(236, 0, 140, 0.28);

  --r-sm: var(--radius-xs);
  --r-md: var(--radius-sm);
  --r-lg: var(--radius);
  --r-xl: 16px;
  --r-pill: 999px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --container: 1200px;
  --nav-h: 64px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
}

/* ---- Dark: the system preference, unless the viewer chose light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1218;
    --bg-2: #0A0D12;
    --surface: #161C25;
    --surface-2: #1B222D;
    --elev: #1A212C;
    --border: #28313E;
    --border-strong: #354150;
    --text: #E7ECF3;
    --text-dim: #9AA7B8;
    --text-faint: #667081;
    --brand-tint: rgba(236, 0, 140, 0.16);
    --brand-tint-2: rgba(236, 0, 140, 0.24);
    --secondary: #818CF8;
    --secondary-tint: rgba(129, 140, 248, 0.18);
    --crit: #FF6B72; --high: #FBBF4D; --med: #FCD34D; --low: #6BA6FF;
    --info: #6BA6FF; --ok: #3ECF8E; --warn: #FBBF4D; --bad: #FF6B72;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --grad-card: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    --grad-hero:
      radial-gradient(1100px 560px at 8% -12%, rgba(236, 0, 140, 0.30), transparent 62%),
      radial-gradient(900px 500px at 100% 0%, rgba(129, 140, 248, 0.24), transparent 58%),
      radial-gradient(700px 420px at 50% 118%, rgba(163, 35, 142, 0.20), transparent 60%);
    --tint-accent: rgba(251, 191, 77, 0.16);
    --tint-success: rgba(62, 207, 142, 0.16);
    --tint-warning: rgba(251, 191, 77, 0.16);
    --tint-danger: rgba(255, 107, 114, 0.16);
    color-scheme: dark;
  }
}

/* ---- Dark: chosen explicitly with the toggle ---- */
:root[data-theme="dark"] {
  --bg: #0E1218;
  --bg-2: #0A0D12;
  --surface: #161C25;
  --surface-2: #1B222D;
  --elev: #1A212C;
  --border: #28313E;
  --border-strong: #354150;
  --text: #E7ECF3;
  --text-dim: #9AA7B8;
  --text-faint: #667081;
  --brand-tint: rgba(236, 0, 140, 0.16);
  --brand-tint-2: rgba(236, 0, 140, 0.24);
  --secondary: #818CF8;
  --secondary-tint: rgba(129, 140, 248, 0.18);
  --crit: #FF6B72; --high: #FBBF4D; --med: #FCD34D; --low: #6BA6FF;
  --info: #6BA6FF; --ok: #3ECF8E; --warn: #FBBF4D; --bad: #FF6B72;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --grad-card: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  --grad-hero:
    radial-gradient(1100px 560px at 8% -12%, rgba(236, 0, 140, 0.30), transparent 62%),
    radial-gradient(900px 500px at 100% 0%, rgba(129, 140, 248, 0.24), transparent 58%),
    radial-gradient(700px 420px at 50% 118%, rgba(163, 35, 142, 0.20), transparent 60%);
  --tint-accent: rgba(251, 191, 77, 0.16);
  --tint-success: rgba(62, 207, 142, 0.16);
  --tint-warning: rgba(251, 191, 77, 0.16);
  --tint-danger: rgba(255, 107, 114, 0.16);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}