/* Apex Global brand tokens.
   Sourced from theapexglobal.com - see docs/brand.md.
   Never hardcode a colour in a component; add a token here instead. */

@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- brand ------------------------------------------------------- */
  --apex-ink: #0F172A;
  --apex-abyss: #050814;
  --apex-pink: #FF1464;
  --apex-pink-hover: #E60E59;
  --apex-pink-wash: rgba(255, 20, 100, 0.12);
  --apex-slate: #475569;
  --apex-muted: #64748B;
  --apex-mist: #7C8BA1;
  --apex-surface: #F8FAFC;
  --apex-white: #FFFFFF;

  /* --- status (CRM additions, all AA on white) ---------------------- */
  --ok: #059669;
  --ok-wash: rgba(5, 150, 105, 0.12);
  --warn: #D97706;
  --warn-wash: rgba(217, 119, 6, 0.13);
  --danger: #DC2626;
  --danger-wash: rgba(220, 38, 38, 0.12);
  --info: #2563EB;
  --info-wash: rgba(37, 99, 235, 0.12);

  /* --- semantic surfaces ------------------------------------------- */
  --bg: var(--apex-surface);
  --bg-sunken: #EEF2F7;
  --card: var(--apex-white);
  --sidebar: var(--apex-ink);
  --sidebar-text: rgba(255, 255, 255, 0.72);
  --sidebar-text-strong: #FFFFFF;
  --sidebar-hover: rgba(255, 255, 255, 0.07);

  --text: var(--apex-ink);
  --text-secondary: var(--apex-slate);
  --text-muted: var(--apex-muted);
  --text-faint: var(--apex-mist);

  --line: rgba(15, 23, 42, 0.09);
  --line-strong: rgba(15, 23, 42, 0.16);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 48px rgba(15, 23, 42, 0.10);

  /* Chart series colour that must stay legible against the card in both themes.
     Brand ink is near-black, so it is invisible on a dark canvas. */
  --chart-primary: var(--apex-ink);
  --tooltip-bg: var(--apex-ink);

  /* --- shape ------------------------------------------------------- */
  --r-card: 16px;
  --r-input: 10px;
  --r-pill: 999px;
  --sidebar-w: 236px;

  /* --- type -------------------------------------------------------- */
  --font: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, monospace;
}

/* Dark mode: same tokens, re-pointed. Follows the OS unless the user picks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: var(--apex-abyss);
    --bg-sunken: #0B1020;
    --card: #0F172A;
    --sidebar: #020409;

    --text: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-faint: #64748B;

    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.4);

    --ok: #34D399;
    --warn: #FBBF24;
    --danger: #F87171;
    --info: #60A5FA;

    --chart-primary: #A5B4C8;
    --tooltip-bg: #334155;
  }
}

:root[data-theme='dark'] {
  --bg: var(--apex-abyss);
  --bg-sunken: #0B1020;
  --card: #0F172A;
  --sidebar: #020409;

  --text: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-faint: #64748B;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.4);

  --ok: #34D399;
  --warn: #FBBF24;
  --danger: #F87171;
  --info: #60A5FA;

  --chart-primary: #A5B4C8;
  --tooltip-bg: #334155;
}