/*
 * ACG Markets — Dashboard extension of the design system
 *
 * Loaded after css/landing/tokens.css. Adds only what the app shell needs
 * and the landing page never did. Colors, type, spacing and radii all come
 * from the shared scale; nothing here redefines a landing token.
 * When a value here proves out, move it into the shared tokens.css.
 */
:root {
  /* App shell */
  --acg-topbar-h: 56px;
  --acg-tabbar-h: 52px;
  --acg-sidebar-w: 248px;
  --acg-content-max: 1128px;

  /* Data states (dashboard figures) */
  --acg-positive: var(--acg-teal);
  --acg-negative-tint: color-mix(in srgb, var(--acg-negative) 12%, transparent);
  --acg-teal-tint: color-mix(in srgb, var(--acg-teal) 10%, transparent);

  /* Chart */
  --acg-chart-h: 240px;
  --acg-chart-fill: linear-gradient(180deg, color-mix(in srgb, var(--acg-teal) 28%, transparent), transparent);

  /* Icons */
  --acg-icon: 20px;
  --acg-icon-sm: 16px;
  --acg-avatar: 32px;
  --acg-fab: 48px;

  /* Theme-aware roles (dark values; light overrides below) */
  --acg-ink-accent: var(--acg-teal);      /* teal used as text/icon colour */
  --acg-page: var(--acg-bg);
  --acg-chrome: var(--acg-bg);            /* tab bar + sidebar */
  --acg-card-shadow: none;
  --acg-topbar-bg: var(--acg-teal-deep);  /* the old dashboard's teal top bar */
  --acg-sidebar-bg: var(--acg-surface); /* sidebar uses the card surface */
  --acg-nav-hover: color-mix(in srgb, var(--acg-white) 5%, transparent);
  --acg-nav-active: color-mix(in srgb, var(--acg-white) 8%, transparent);

  /* Primary action fill. Dark theme: bright teal with black text.
     Light theme: dark teal with white text, as on the website's light version. */
  --acg-cta: var(--acg-teal);
  --acg-cta-hover: var(--acg-teal-hover);
  --acg-cta-ink: var(--acg-text-inverse);

  /* Menus keep the page theme even inside dark/teal surfaces.
     Resolved here on :root, so .acg-on-dark overrides don't reach them. */
  --acg-menu-bg: var(--acg-surface);
  --acg-menu-fg: var(--acg-text);
  --acg-menu-fg-2: var(--acg-text-secondary);
  --acg-menu-hover: var(--acg-surface-muted);
  --acg-menu-edge: var(--acg-border);
}

/* ── Light theme ───────────────────────────────────────────────
 * The scale stays the same; only the colour values change.
 * Set with <html data-theme="light">.
 */
:root[data-theme="light"] {
  /* Sampled from the website's light version (Figma "Light Version"):
     cool grey page, white cards, near-black text, teal accent text and
     dark-teal primary buttons. */
  color-scheme: light;
  --acg-bg: #f0f0f2;
  --acg-page: #f0f0f2;
  --acg-chrome: #ffffff;
  --acg-surface: #ffffff;
  --acg-surface-sunken: #f6f6f8;
  --acg-surface-muted: #ededf0;
  --acg-text: #0c0c0e;
  --acg-text-secondary: #54545c;
  --acg-text-muted: #84848c;
  --acg-border: #e4e4e8;
  --acg-border-subtle: rgba(12, 12, 14, 0.07);
  --acg-border-strong: rgba(13, 13, 13, 0.3);
  --acg-border-accent: rgba(1, 156, 162, 0.5);
  --acg-positive: #008b83;
  --acg-ink-accent: #019ca2;
  --acg-negative: #d64545;
  --acg-teal-tint: rgba(1, 156, 162, 0.1);
  --acg-negative-tint: rgba(214, 69, 69, 0.1);
  --acg-card-edge: none;
  --acg-card-shadow: 0 1px 2px rgba(12, 12, 14, 0.04), 0 8px 24px rgba(12, 12, 14, 0.04);
  --acg-shadow: 0 12px 32px rgba(12, 12, 14, 0.12);
  --acg-inner-glow: none;
  --acg-sidebar-bg: #ffffff;
  --acg-nav-hover: rgba(12, 12, 14, 0.04);
  --acg-nav-active: rgba(1, 156, 162, 0.1);
  --acg-cta: #015156;
  --acg-cta-hover: var(--acg-teal-deep);
  --acg-cta-ink: #ffffff;
}

/* Surfaces that stay dark in both themes (teal top bar, Total Balance card) */
.acg-on-dark {
  --acg-cta: var(--acg-teal);
  --acg-cta-hover: var(--acg-teal-hover);
  --acg-cta-ink: var(--acg-text-inverse);
  --acg-text: #ffffff;
  --acg-text-secondary: rgba(255, 255, 255, 0.8);
  --acg-text-muted: rgba(255, 255, 255, 0.6);
  --acg-border-subtle: rgba(255, 255, 255, 0.12);
  --acg-surface: rgba(255, 255, 255, 0.08);
  --acg-positive: var(--acg-teal);
  --acg-ink-accent: var(--acg-teal);
  color: var(--acg-text);
}

/* ── Dashboard roles: Alpha Group template layout, ACG colours ──
 * Layout follows the Alpha Capital / Alpha Futures dashboards
 * (docs/ALPHA-TEMPLATE.md); every colour below is an ACG token. */
:root {
  /* Greys (team feedback, 10 Nov 2026: "keep the cyan, make the greys and blacks better"):
     one neutral scale with even steps and a hint of cool, instead of plain greys mixed with green-greys.
     Darker pass (same day): page 050506 → well 09090a → panel 0e0e10 → raised 141416 → control 1a1a1d → control hover 222226 */
  --acg-bg: #050506;
  --acg-page: #050506;
  --acg-chrome: #050506;
  --acg-surface: #141416;
  --acg-surface-sunken: #09090a;
  --acg-surface-muted: #222226;
  --acg-border: #222226;
  --d-page: #050506;
  --d-panel: #0e0e10;                      /* cards, sidebar */
  --d-well: #09090a;                       /* table head, inputs */
  --d-ctl: #1a1a1d;                        /* muted buttons, pills */
  --d-ctl-2: #222226;
  --d-line: rgba(255, 255, 255, 0.06);
  --d-text: var(--acg-text);
  --d-text-2: var(--acg-text-secondary);
  --d-muted: var(--acg-text-muted);
  --d-up: var(--acg-teal);
  --d-down: var(--acg-negative);
  --d-warn: var(--acg-cat-metal);
  --d-ink: var(--acg-teal);
  --d-brand: var(--acg-grad-teal);
  --d-brand-panel: var(--acg-grad-teal);
  --d-brand-tint: color-mix(in srgb, var(--acg-teal) 10%, transparent);
  --d-brand-solid: var(--acg-teal);
  /* The one brand colour on the page, used like the Alpha dashboards use theirs:
     profile panel, primary button, selected tab, tooltip, chart line. Deep teal, not the bright accent. */
  --d-accent: var(--acg-teal-deep);
  --d-accent-hover: var(--acg-teal-mid);
  --d-accent-line: var(--acg-teal-mid);
  --d-accent-panel: var(--acg-grad-teal);
  --d-on-accent: rgba(255, 255, 255, 0.12);   /* tiles and buttons on the teal panel / insights card */
  --d-on-accent-hover: rgba(255, 255, 255, 0.2);
  --d-on-accent-text: rgba(255, 255, 255, 0.8);  /* same in both themes: these panels stay dark */
  --d-on-accent-muted: rgba(255, 255, 255, 0.6);
  --d-promo: var(--acg-glow-trader), #0c0c0e;   /* Alpha Group card: website glow on the sunken surface, dark in both themes */
  --d-hero: var(--acg-noise), var(--acg-grad-cta);  /* the website's closing-CTA gradient; dark in both themes */
  /* The main action: ACG deep teal with white text (the white website button stays on dark brand panels) */
  --d-btn: var(--d-accent);
  --d-btn-ink: var(--acg-white);
  --d-btn-hover: var(--d-accent-hover);
  --d-btn-box: rgba(255, 255, 255, 0.14);
  --d-btn-arrow: invert(1);
  /* Alpha Capital promo: the website's Alpha Group indigo (--acg-grad-myalpha) with a blue light, so it doesn't repeat the teal profile panel; dark in both themes */
  --d-giveaway: var(--acg-noise), radial-gradient(60% 70% at 80% 0%, rgba(255, 255, 255, 0.12), transparent 70%), radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--acg-cat-index) 45%, transparent), transparent 70%), var(--acg-grad-myalpha);
  /* Colour accents (team feedback, 9 Nov 2026: "play with colours more").
     The bright ACG teal is used only as a line, icon, tint or soft glow, never as a big fill. */
  --d-hi: var(--acg-teal);
  --d-hi-tint: color-mix(in srgb, var(--acg-teal) 11%, transparent);
  --d-hi-ring: color-mix(in srgb, var(--acg-teal) 22%, transparent);
  --d-nav-on: linear-gradient(90deg, color-mix(in srgb, var(--acg-teal) 15%, transparent), color-mix(in srgb, var(--acg-teal) 3%, transparent));
  --d-glow: radial-gradient(55% 480px at 78% -140px, color-mix(in srgb, var(--acg-teal-deep) 46%, transparent), transparent 75%), radial-gradient(45% 420px at 12% -180px, color-mix(in srgb, var(--acg-cat-index) 16%, transparent), transparent 75%);
  --d-card-glow: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--acg-teal) 9%, transparent), transparent 60%);
  /* Second colours: the website's market palette (tokens.css --acg-cat-*), one per kind of thing:
     teal = money in / start, orange = money out, blue = moving and performance, violet = platforms and learning, amber = documents */
  --d-c-teal: var(--acg-teal);
  --d-c-blue: color-mix(in srgb, var(--acg-cat-index) 72%, var(--acg-white));
  --d-c-violet: color-mix(in srgb, var(--acg-cat-soft) 70%, var(--acg-white));
  --d-c-orange: color-mix(in srgb, var(--acg-cat-energy) 82%, var(--acg-white));
  --d-c-amber: color-mix(in srgb, var(--acg-cat-metal) 78%, var(--acg-white));
  --d-tint: 15%;
  --d-sb-w: var(--acg-sidebar-w);
  --d-r-sm: 10px;                          /* every button, control, menu item and icon tile: same as the sidebar and cards */
  --d-r: var(--acg-radius-md);
  --d-r-lg: var(--acg-radius-md);
}
:root[data-theme="light"] {
  --d-page: #f0f0f2;
  --d-panel: #ffffff;
  --d-well: #f6f6f8;
  --d-ctl: #ededf0;
  --d-ctl-2: #e2e2e6;
  --d-line: rgba(12, 12, 14, 0.06);
  --d-text: #0c0c0e;
  --d-btn: var(--d-accent);
  --d-btn-ink: #ffffff;
  --d-btn-hover: var(--d-accent-hover);
  --d-btn-box: rgba(255, 255, 255, 0.16);
  --d-btn-arrow: invert(1);
  --d-text-2: #54545c;
  --d-muted: #84848c;
  --d-up: #008b83;
  --d-down: #d64545;
  --d-warn: #b7791f;
  --d-ink: #019ca2;
  --d-brand-tint: rgba(1, 156, 162, 0.1);
  --d-brand-solid: #015156;
  --d-accent: #015156;
  --d-accent-hover: var(--acg-teal-deep);
  --d-accent-line: #019ca2;
  --d-hi: #019ca2;
  --d-hi-tint: rgba(1, 156, 162, 0.1);
  --d-hi-ring: rgba(1, 156, 162, 0.28);
  --d-nav-on: linear-gradient(90deg, rgba(1, 156, 162, 0.14), rgba(1, 156, 162, 0.03));
  --d-glow: radial-gradient(55% 480px at 78% -140px, rgba(1, 156, 162, 0.13), transparent 75%), radial-gradient(45% 420px at 12% -180px, color-mix(in srgb, var(--acg-cat-index) 8%, transparent), transparent 75%);
  --d-card-glow: radial-gradient(90% 120% at 0% 0%, rgba(1, 156, 162, 0.07), transparent 60%);
  --d-c-teal: #019ca2;
  --d-c-blue: var(--acg-cat-index);
  --d-c-violet: var(--acg-cat-soft);
  --d-c-orange: var(--acg-cat-energy);
  --d-c-amber: var(--acg-cat-metal);
  --d-tint: 11%;
}

/* ── One teal (team feedback, 10 Nov 2026: "there are 100 greens, pick one good one and use only that") ──
 * Every green and teal in the dashboard comes from --d-teal: the colour itself, a see-through tint of it,
 * or a glow of it on black. Nothing else. Text on a teal fill is dark (like the website's buttons).
 * Dark: the ACG aqua. Light: one deeper step of the same teal so it reads on white.
 * --d-teal-on-dark stays the aqua in both themes, for the panels that are always dark (hero, promo).
 * Selector is :root[data-theme] so it wins over the older theme blocks above. */
:root[data-theme] {
  --d-teal: #3fe0d0;
  --d-teal-ink: #03211e;
  --d-teal-on-dark: #3fe0d0;
  --d-teal-hover: color-mix(in srgb, var(--d-teal) 82%, var(--acg-white));

  --acg-teal: var(--d-teal);
  --acg-teal-hover: var(--d-teal-hover);
  --acg-teal-mid: color-mix(in srgb, var(--d-teal-on-dark) 55%, #050506);
  --acg-teal-deep: color-mix(in srgb, var(--d-teal-on-dark) 32%, #050506);
  --acg-teal-ring: color-mix(in srgb, var(--d-teal) 15%, transparent);
  --acg-teal-tint: color-mix(in srgb, var(--d-teal) 10%, transparent);
  --acg-ink-accent: var(--d-teal);
  --acg-positive: var(--d-teal);
  --acg-border-accent: color-mix(in srgb, var(--d-teal) 55%, transparent);
  --acg-cta: var(--d-teal);
  --acg-cta-hover: var(--d-teal-hover);
  --acg-cta-ink: var(--d-teal-ink);
  --acg-chart-fill: linear-gradient(180deg, color-mix(in srgb, var(--d-teal) 28%, transparent), transparent);

  --d-up: var(--d-teal);
  --d-ink: var(--d-teal);
  --d-brand-solid: var(--d-teal);
  --d-brand-tint: color-mix(in srgb, var(--d-teal) 12%, transparent);
  --d-accent: var(--d-teal);
  --d-accent-hover: var(--d-teal-hover);
  --d-accent-line: var(--d-teal);
  --d-accent-ink: var(--d-teal-ink);
  --d-btn: var(--d-teal);
  --d-btn-ink: var(--d-teal-ink);
  --d-btn-hover: var(--d-teal-hover);
  --d-btn-box: color-mix(in srgb, var(--d-teal-ink) 12%, transparent);
  --d-btn-arrow: none;
  --d-hi: var(--d-teal);
  --d-hi-tint: color-mix(in srgb, var(--d-teal) 12%, transparent);
  --d-hi-ring: color-mix(in srgb, var(--d-teal) 24%, transparent);
  --d-c-teal: var(--d-teal);
  --d-nav-on: linear-gradient(90deg, color-mix(in srgb, var(--d-teal) 14%, transparent), color-mix(in srgb, var(--d-teal) 3%, transparent));
  --d-glow: radial-gradient(55% 480px at 78% -140px, color-mix(in srgb, var(--d-teal) 11%, transparent), transparent 75%);
  --d-card-glow: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--d-teal) 6%, transparent), transparent 60%);
  /* Always-dark panels (profile, wallet and account heroes, sign-in, settings, applications):
     near-black with a big ACG mark in the teal, fading down on the right (option C, picked 10 Nov 2026; no glow) */
  --d-hero: var(--acg-noise),
    url("/images/acg-mark-teal-fade.svg?v=2") right -4% top 30% / auto 190% no-repeat,
    linear-gradient(180deg, #0f0f11 0%, #08080a 100%);
  --d-promo: var(--acg-noise), radial-gradient(60% 55% at 42% 112%, color-mix(in srgb, var(--d-teal-on-dark) 30%, transparent), transparent 70%), #0c0c0e;
  /* avatar and other flat brand fills: one solid teal-on-black, no two-teal gradient */
  --acg-grad-teal: linear-gradient(var(--acg-teal-deep), var(--acg-teal-deep));
  --acg-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] {
  --d-teal: #008a82;
  --d-teal-ink: #ffffff;
  --acg-shadow: 0 12px 32px rgba(12, 12, 14, 0.12);
  --d-teal-hover: color-mix(in srgb, var(--d-teal) 86%, #000000);
  --d-glow: radial-gradient(55% 480px at 78% -140px, color-mix(in srgb, var(--d-teal) 9%, transparent), transparent 75%);
}


/* ══ Colour + type pass (11 Nov 2026) ═══════════════════════════════════════════
 * Round 1: "Alpha uses dark mode better: more grey tones, the primary colour used less,
 *   colours mean something. Our teal sucks, there's too much of it. Use Inter, the type is too small."
 * Round 2: "a slightly more vibrant teal; more grey options; copy Alpha Capital's sizes;
 *   the giveaway in Alpha Capital's exact blue, no timer; the chart line teal."
 *
 * Every colour has one job:
 *   greys      – everything by default (Alpha Capital's 8 near-blacks, 5 text levels, no grain, no card edges)
 *   teal       – the brand and "press this / this is selected": main button, selected tab, current nav item,
 *                the chart line, the profile panel, focus rings, progress
 *   green      – money up, success, buy     red – money down, errors, sell     amber – waiting, warnings
 *   Alpha blue – the Alpha Capital giveaway card only
 * Teal and greys were picked from live options on 12 Nov 2026: teal "original" (#3fe0d0), greys "ink".
 * Sizes (Alpha's, measured; buttons bigger for reading) live in shell.css.
 */
:root {
  --acg-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --acg-sidebar-w: 220px;            /* Alpha: 220 */
  --acg-size-xs: 12px;               /* Alpha: labels 12, buttons and table 11–11.2 */
  --acg-size-sm: 13px;
  --acg-tracking-display: -0.03em;   /* Alpha: -1.12px at 38px */
  --acg-weight-light: 300;
  --acg-noise: none;                 /* no grain on panels */
  --alpha-blue: linear-gradient(180deg, #004bff 0%, #255ad9 100%);   /* Alpha Capital's profile panel, exact */
}

/* ── Teal (picked 12 Nov 2026 from the options: "original") ──
 * fill: buttons, selected tab · ink: text on the fill · text: teal as a line or text · deep: profile and sign-in panels */
:root[data-theme] {
  --t-fill: #3fe0d0; --t-hover: #6ae7da; --t-ink: #03211e;
  --t-text-dark: #3fe0d0; --t-text-light: #008a82;
  --t-deep: #14a091; --t-deep-2: #0b5a53;
}

/* ── Greys (picked 12 Nov 2026 from the options: "ink", a true-black page like Alpha Futures) ──
 * page · panel (cards, sidebar) · well (table head) · raise (promo) · ctl (grey buttons) · ctl-2 (hover) · pill */
:root[data-theme="dark"] {
  --g-page: #000000; --g-panel: #0b0b0c; --g-well: #0e0e10; --g-raise: #111113; --g-ctl: #151517; --g-ctl-2: #1b1b1e; --g-pill: #17171a;
  --g-text: #f7f8f8; --g-text-2: #c3c3c6; --g-muted: #747478; --g-dim: #606064; --g-faint: #37373a;
  --g-line: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] {
  --acg-bg: var(--g-page); --acg-page: var(--g-page); --acg-chrome: var(--g-page);
  --acg-surface: var(--g-raise); --acg-surface-sunken: var(--g-well); --acg-surface-muted: var(--g-ctl-2); --acg-border: var(--g-ctl-2);
  --acg-text: var(--g-text); --acg-text-secondary: var(--g-text-2); --acg-text-muted: var(--g-muted);
  --d-page: var(--g-page); --d-panel: var(--g-panel); --d-well: var(--g-well); --d-ctl: var(--g-ctl); --d-ctl-2: var(--g-ctl-2);
  --d-pill: var(--g-pill); --d-raise: var(--g-raise);
  --d-line: var(--g-line);
  --d-text: var(--g-text); --d-text-2: var(--g-text-2); --d-muted: var(--g-muted); --d-dim: var(--g-dim); --d-faint: var(--g-faint);
  --d-up: #39d66b; --d-down: #ff6b6b; --d-warn: #f0a83a;     /* green: Alpha Capital's, exact */
  --d-teal: var(--t-fill); --d-teal-ink: var(--t-ink); --d-teal-hover: var(--t-hover);
  --d-teal-text: var(--t-text-dark);
}
:root[data-theme="light"] {
  --d-pill: #ededf0; --d-raise: #f6f6f8; --d-dim: #9a9aa0; --d-faint: #b4b4ba;
  --d-up: #15964f; --d-down: #d64545; --d-warn: #b7791f;
  --d-teal: var(--t-text-light); --d-teal-ink: #ffffff; --d-teal-hover: color-mix(in srgb, var(--t-text-light) 86%, #000);
  --d-teal-text: var(--t-text-light);
}

/* ── Roles: who gets the teal, who gets the greys ── */
:root[data-theme] {
  --d-teal-on-dark: var(--t-text-dark);
  --acg-teal: var(--d-teal); --acg-teal-hover: var(--d-teal-hover);
  --acg-teal-tint: color-mix(in srgb, var(--d-teal) 12%, transparent);
  --acg-teal-ring: color-mix(in srgb, var(--d-teal) 30%, transparent);
  --acg-ink-accent: var(--d-teal-text);
  --acg-positive: var(--d-up);
  --acg-negative: var(--d-down);
  --acg-cta: var(--d-teal); --acg-cta-hover: var(--d-teal-hover); --acg-cta-ink: var(--d-teal-ink);
  --acg-border-accent: color-mix(in srgb, var(--d-teal) 55%, transparent);
  --d-ink: var(--d-teal-text);
  --d-brand-solid: var(--d-teal);
  --d-brand-tint: color-mix(in srgb, var(--d-teal) 12%, transparent);
  --d-accent: var(--d-teal); --d-accent-hover: var(--d-teal-hover); --d-accent-ink: var(--d-teal-ink);
  --d-accent-line: var(--d-teal-text);
  --d-btn: var(--d-teal); --d-btn-ink: var(--d-teal-ink); --d-btn-hover: var(--d-teal-hover);
  --d-btn-box: transparent; --d-btn-arrow: none;
  --d-hi: var(--d-teal-text);
  --d-hi-tint: color-mix(in srgb, var(--d-teal) 12%, transparent);
  --d-hi-ring: color-mix(in srgb, var(--d-teal-text) 30%, transparent);
  /* current nav item: Alpha's brand tint (20% → 30%), in teal */
  --d-nav-on: linear-gradient(90deg, color-mix(in srgb, var(--d-teal) 20%, transparent), color-mix(in srgb, var(--d-teal) 30%, transparent));
  --d-c-teal: var(--d-text-2);     /* icon tiles: grey, not teal */
  --d-glow: none;                  /* no teal light at the top of the page */
  --d-card-glow: none;
  --acg-chart-fill: linear-gradient(180deg, color-mix(in srgb, var(--d-teal-text) 24%, transparent), transparent);
  /* the profile panel: the brand colour top to bottom with white text, like Alpha's blue panel */
  --d-brand-panel: linear-gradient(180deg, var(--t-deep) 0%, var(--t-deep-2) 100%);
  /* the $250K giveaway is Alpha Capital's: their exact blue */
  --d-giveaway: var(--alpha-blue);
  /* the Alpha Group card on other pages: Alpha's promo grey */
  --d-promo: #131313;
  --acg-grad-teal: linear-gradient(var(--t-deep), var(--t-deep));
  /* always-dark hero panels (wallet, account, settings, applications, sign-in): the ACG mark in grey */
  --d-hero: url("/images/acg-mark-grey-fade.svg?v=1") right -4% top 30% / auto 190% no-repeat, linear-gradient(180deg, #121212 0%, #0b0b0b 100%);
}