/*
 * Design tokens — the single styling contract (ADR-0017).
 *
 * This is the ONLY file that may contain raw colour literals; a guard test
 * (design-tokens.spec.js) enforces that everywhere else. Themes are value-sets:
 * :root carries Forge (dark, the default), [data-theme="ash"], [data-md-color-scheme="default"] overrides
 * values only — components never ship per-theme rules.
 *
 * Chroma budget (ADR-0017): surfaces near-neutral; saturated brand hue only on
 * interactive elements; flame/bronze accents (Forge) and the cool ash surfaces
 * (Ash) are semantic-only. Every text/bg pair ≥ 4.5:1, --border-ui ≥ 3:1 — enforced
 * by theme-contrast.spec.js.
 *
 * Alpha variants are composed at the point of use with
 * `color-mix(in srgb, var(--token) N%, transparent)` so they re-value with
 * the token (and with the Theme).
 */
:root {
  /* ---- Forge (dark): warm black-red surfaces, ember/rust interactive,
     brass active states ---- */
  --bg: #151110;
  --surface: #1E1815;
  --surface-hover: #282019;

  --ink: #E2D9CE;        /* bone, 13.4:1 on --bg */
  --ink-mute: #9C8F84;   /* 6.0:1 */
  --ink-faint: #928579;  /* 4.9:1 on --surface */

  --primary: #D06A4A;          /* rust — links, focus, interactive ink (5.2:1) */
  --primary-fill: #8F3A26;     /* solid button fill */
  --primary-fill-ink: #E2D9CE; /* 5.4:1 on --primary-fill */
  --primary-fill-hover: #7A311F;

  --accent-active: #C2A25C;    /* brass — active tab, selection, hover borders (7.7:1) */
  --accent-hot: #C2A25C;       /* semantic highlight (ember/flame) */
  --success: #7CBF96;          /* phosphor (8.7:1) */
  --warning: #C2A25C;          /* brass */
  --error: #DB5C5C;            /* derived; 5.1:1 on --bg, 4.8:1 on --surface */

  --border: #38302B;           /* decorative hairline */
  --border-ui: #7A6C5F;        /* interactive outline, 3.7:1 (ADR's #4A403A measured 1.9:1) */
  --shadow: rgba(0, 0, 0, 0.5);

  /* ---- Bases for alpha composition ---- */
  --white: #ffffff;
  --black: #000000;

  /* ---- Geometry ---- */
  --sidebar-w: 260px;

  /* ---- Type (theme-independent) ----
     Three faces, three jobs (#114): display = Saira Semi Condensed (headings,
     brand); body = Inter (labels, inputs, prose); mono = IBM Plex Mono (machine
     data — activity log, raw TagScript editor, snowflake IDs, cron). The size
     scale, weights and line-heights are the type contract — no raw font-size or
     font-weight outside this file (design-tokens.spec.js). Sizes are a scale:
     ~44 ad-hoc values were normalised onto these rungs. */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Saira Semi Condensed', var(--font-body);
  --font-mono: 'IBM Plex Mono', 'Consolas', 'Monaco', monospace;

  --fs-3xs: 0.7rem;
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.9rem;
  --fs-base: 0.95rem;
  --fs-lg: 1rem;
  --fs-xl: 1.1rem;
  --fs-2xl: 1.25rem;
  --fs-3xl: 1.5rem;
  --fs-4xl: 2rem;
  --fs-5xl: 2.5rem;
  --fs-6xl: 3rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.3;
  --lh-snug: 1.4;
  --lh-normal: 1.6;

  /* ---- Discord simulation (previews must look like Discord in both Themes;
     never themed) ---- */
  --discord-blurple: #5865f2;
  --discord-blurple-350: #7c8af2;
  --discord-blurple-300: #818cf8;
  --discord-mention-ink: #c9cdfb;
  --discord-bg: #313338;
  --discord-bg-alt: #2b2d31;
  --discord-bg-code: #1e1f22;
  --discord-ink: #dbdee1;
  --discord-ink-strong: #f2f3f5;
  --discord-ink-muted: #949ba4;
  --discord-link: #00a8fc;
  --discord-green: #57f287;
  --discord-green-deep: #248046;
  --discord-red: #ed4245;
  --discord-red-deep: #da373c;
  --discord-yellow: #fee75c;
  --discord-fuchsia: #eb459e;
  --discord-orange: #faa81a;

  /* ---- XP-card management page (fixed light sub-palette, MyXpCard.vue) ---- */
  --xp-accent: #5a5def;
  --xp-accent-hover: #4a4dcf;
  --xp-accent-soft-bg: #f0f4ff;
  --xp-panel-bg: #f0f4f8;
  --xp-ok: #2e7d32;
  --xp-ok-bg: #f1f8e9;
  --xp-error: #d32f2f;
  --xp-error-deep: #c62828;
  --xp-error-bg: #ffebee;
  --gray-50: #f9f9f9;
  --gray-100: #f5f5f5;
  --gray-150: #f0f0f0;
  --gray-200: #e0e0e0;
  --gray-300: #dddddd;
  --gray-400: #999999;
  --gray-450: #888888;
  --gray-700: #666666;
  --gray-800: #333333;
}

/* ---- Ash (light — the cool day theme): steely cooled-grey surfaces,
   Salamanders drake-green interactive, ember/bronze semantic accents.
   Warning stays bronze (not red) so green + red never stack. ---- */
[data-theme="ash"], [data-md-color-scheme="default"] {
  --bg: #E6E9ED;
  --surface: #F1F3F6;
  --surface-hover: #DADEE4;

  --ink: #262D33;        /* cool steel-slate */
  --ink-mute: #4B545C;
  --ink-faint: #5A636B;

  --primary: #35634B;          /* drake green (Salamanders) */
  --primary-fill: #35634B;
  --primary-fill-ink: #F4F6F2;
  --primary-fill-hover: #2A4F3C;

  --accent-active: #35634B;
  --accent-hot: #A8451F;       /* ember flame — semantic-only */
  --success: #35634B;
  --warning: #79663B;          /* bronze — off the green/red axis */
  --error: #A32E2E;

  --border: #D2D7DD;
  --border-ui: #727A82;
  --shadow: rgba(38, 45, 51, 0.16);
}

/* Sidebar narrows at mid widths; everything pinned to its edge follows. */
@media (max-width: 1200px) {
  :root {
    --sidebar-w: 220px;
  }
}

@media (max-width: 980px) {
  :root {
    --sidebar-w: 200px;
  }
}