/* ==========================================================================
   BattleYield — design tokens
   Single source of truth for colours, type, spacing, radii, shadows, motion.
   Both pages (index.html, app.html) load this file FIRST, then base.css,
   then their own page stylesheet. Never redefine a token outside this file.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- surfaces ------------------------------------------------------- */
  --c-bg: #0b0d12;
  --c-bg-deep: #07080c;          /* behind the hero / footer                */
  --c-panel: #12151d;
  --c-panel-2: #181c27;
  --c-panel-3: #1f2432;          /* hover / raised                          */
  --c-line: #232936;
  --c-line-strong: #2f3748;
  --c-input: #0d1017;

  /* ---- text ----------------------------------------------------------- */
  --c-text: #e8ecf4;             /* 15.6:1 on bg                            */
  --c-dim: #8b93a7;              /* 6.2:1 on bg — OK for body/small text    */
  --c-faint: #5a617a;            /* 3.1:1 — decorative ONLY: icons, rules,  */
                                 /* disabled, text >= 24px. Never body copy */

  /* ---- teams ---------------------------------------------------------- */
  --c-dogs: #f2a900;             /* 9.3:1 on bg                             */
  --c-dogs-2: #ffc23d;           /* hover / highlight                       */
  --c-dogs-deep: #a67100;
  --c-dogs-ink: #0b0d12;         /* text ON gold                            */
  --c-dogs-soft: rgba(242, 169, 0, 0.12);
  --c-dogs-line: rgba(242, 169, 0, 0.35);

  --c-cats: #4caf6d;            /* 7.0:1 on bg                             */
  --c-cats-2: #6ccb8a;
  --c-cats-deep: #2f7d4a;
  --c-cats-ink: #06210f;        /* text ON green                           */
  --c-cats-soft: rgba(76, 175, 109, 0.12);
  --c-cats-line: rgba(76, 175, 109, 0.35);

  /* ---- semantic ------------------------------------------------------- */
  --c-danger: #e0453a;           /* fills, borders                          */
  --c-danger-text: #ff7b71;      /* 6.4:1 on bg — use for red TEXT          */
  --c-danger-soft: rgba(224, 69, 58, 0.14);
  --c-warn: #f2a900;
  --c-ok: #4caf6d;
  --c-info: #6f9cff;
  --c-info-text: #9ebaff;        /* 8.9:1 on bg — use for blue TEXT (truce, info) */
  --c-info-soft: rgba(111, 156, 255, 0.14);
  --c-focus: #ffd66b;

  /* ---- glows (box-shadow values) -------------------------------------- */
  --glow-dogs: 0 0 0 1px var(--c-dogs-line), 0 12px 40px -12px rgba(242, 169, 0, 0.55);
  --glow-cats: 0 0 0 1px var(--c-cats-line), 0 12px 40px -12px rgba(76, 175, 109, 0.55);
  --glow-dogs-lg: 0 0 0 1px var(--c-dogs-line), 0 0 80px -10px rgba(242, 169, 0, 0.45);
  --glow-cats-lg: 0 0 0 1px var(--c-cats-line), 0 0 80px -10px rgba(76, 175, 109, 0.45);

  /* ---- shadows -------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px -6px rgba(0, 0, 0, 0.6);
  --sh-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 40px -16px rgba(0, 0, 0, 0.8);
  --sh-3: 0 4px 8px rgba(0, 0, 0, 0.5), 0 32px 80px -24px rgba(0, 0, 0, 0.9);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ---- type ----------------------------------------------------------- */
  --f-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-text: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* fluid scale — min at 360px viewport, max at 1280px */
  --t-xs: 0.75rem;                                   /* 12px  labels, eyebrows */
  --t-sm: 0.8125rem;                                 /* 13px  table cells       */
  --t-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);  /* 15–16px body            */
  --t-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17–19px lead            */
  --t-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);    /* 20–24px h3              */
  --t-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem);   /* 24–34px h2              */
  --t-2xl: clamp(2rem, 1.4rem + 3vw, 3.25rem);       /* 32–52px h1 / big stats  */
  --t-3xl: clamp(2.5rem, 1.5rem + 5.5vw, 5rem);      /* 40–80px hero            */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.55;

  --ls-eyebrow: 0.12em;
  --ls-display: -0.02em;

  /* ---- spacing (4px base) --------------------------------------------- */
  --s-1: 0.25rem;   /* 4  */
  --s-2: 0.5rem;    /* 8  */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 3rem;      /* 48 */
  --s-8: 4rem;      /* 64 */
  --s-9: 6rem;      /* 96 */

  --section-y: clamp(3.5rem, 6vw + 1rem, 7.5rem);   /* vertical rhythm between sections */
  --container: 1180px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ---- radii ---------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- motion --------------------------------------------------------- */
  --d-fast: 120ms;
  --d-base: 220ms;
  --d-slow: 480ms;
  --d-reveal: 720ms;
  --d-pulse: 2400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- z-index ladder ------------------------------------------------- */
  --z-embers: 0;
  --z-content: 1;
  --z-topbar: 50;
  --z-tooltip: 80;
  --z-modal: 90;
  --z-toast: 100;
}

/* Team scoping: put .team-dogs / .team-cats on any ancestor and children
   can use --c-team / --c-team-ink / --c-team-soft / --glow-team generically. */
.team-dogs {
  --c-team: var(--c-dogs);
  --c-team-2: var(--c-dogs-2);
  --c-team-ink: var(--c-dogs-ink);
  --c-team-soft: var(--c-dogs-soft);
  --c-team-line: var(--c-dogs-line);
  --glow-team: var(--glow-dogs);
  --glow-team-lg: var(--glow-dogs-lg);
}
.team-cats {
  --c-team: var(--c-cats);
  --c-team-2: var(--c-cats-2);
  --c-team-ink: var(--c-cats-ink);
  --c-team-soft: var(--c-cats-soft);
  --c-team-line: var(--c-cats-line);
  --glow-team: var(--glow-cats);
  --glow-team-lg: var(--glow-cats-lg);
}