:root {
  color-scheme: dark light;

  --edge-color-canvas: #101012;
  /* Fixed neutral backdrop for embedded remote/video content (e.g. the
     admin MT5 VNC terminal viewport) -- deliberately does NOT redefine
     under the light-mode media query below like every other color here.
     The content behind it (a remote desktop stream) has no relationship to
     this app's own theme, so a white backdrop in light mode would just be
     jarring letterboxing, not a "fixed" bug the way an un-themed UI color
     would be. */
  --edge-color-viewport: #101012;
  --edge-color-surface: #17171a;
  --edge-color-surface-raised: #1f1f23;
  --edge-color-surface-hover: #27272c;
  --edge-color-text: #f3f2ee;
  --edge-color-text-subtle: #c7c5bd;
  --edge-color-text-muted: #8b8a84;
  --edge-color-border: #303035;
  --edge-color-accent: #2f6bff;
  --edge-color-accent-soft: rgb(47 107 255 / 16%);
  --edge-color-positive: #2fbf6a;
  --edge-color-positive-soft: rgb(47 191 106 / 15%);
  --edge-color-warning: #f5a623;
  --edge-color-warning-soft: rgb(245 166 35 / 15%);
  --edge-color-negative: #e5484d;
  --edge-color-negative-soft: rgb(229 72 77 / 15%);
  --edge-color-pattern: #8b6fd6;
  /* category-* carries a fixed meaning (currently Buy/Sell on Accounts) the
     moment any page assigns it one -- see INTERFACE_SYSTEM.md 1a. Anything
     that needs an arbitrary per-item color with no shared meaning (e.g.
     Trading Lab's per-bot accent) uses --edge-color-slot-* instead, never
     these. */
  --edge-color-category-a: #2f6bff;
  --edge-color-category-b: #d653a6;
  --edge-color-category-c: #7c5ce7;
  --edge-color-category-d: #008f8c;
  --edge-color-category-e: #d97706;
  --edge-color-category-f: #4d7c0f;
  --edge-color-category-g: #b54708;
  --edge-color-category-h: #475569;
  --edge-color-slot-0: #2f6bff;
  --edge-color-slot-1: #d653a6;
  --edge-color-slot-2: #7c5ce7;
  --edge-color-slot-3: #008f8c;
  --edge-color-slot-4: #d97706;
  --edge-color-slot-5: #4d7c0f;
  --edge-color-slot-6: #b54708;
  --edge-color-slot-7: #475569;

  /* Glass surface: an additive variant (.edge-surface--glass in
     components.css), not a redefinition of --edge-color-surface -- dropdowns,
     popovers, and menus still need an opaque backing so content behind them
     doesn't bleed through, so the base surface tokens are untouched. */
  --edge-glass-bg: linear-gradient(160deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1.5%));
  --edge-glass-border: rgb(255 255 255 / 8%);
  --edge-glass-blur: 20px;
  /* Separate from --edge-glass-blur on purpose: blur(0px) and none are
     visually identical but NOT equivalent to the CSS engine -- any
     backdrop-filter value other than none still creates a new containing
     block for position:fixed descendants (a chart's tooltip, e.g.), which
     silently breaks their viewport-relative positioning math. Light mode
     sets this to a true none below; dark mode's real 20px blur still has
     this limitation, unavoidable while it needs an actual blur. */
  --edge-glass-backdrop-filter: blur(var(--edge-glass-blur));
  /* Dark relies on translucency + blur over the canvas glow for depth;
     light uses an opaque surface with a soft shadow instead (translucent
     white-on-white blur doesn't read as depth the way it does on dark) --
     see the light-mode override below. */
  --edge-glass-shadow: none;
  --edge-glow-positive: 0 0 46px rgb(47 191 106 / 35%);
  --edge-glow-accent: 0 8px 24px rgb(53 224 208 / 25%);
  --edge-gradient-accent: linear-gradient(135deg, #35e0d0, #2f6bff);
  --edge-color-on-accent: #04181a;
  --edge-canvas-glow: radial-gradient(60% 50% at 78% 0%, rgb(53 224 208 / 12%), transparent 60%),
    radial-gradient(50% 40% at 10% 15%, rgb(124 92 231 / 8%), transparent 60%);

  --edge-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --edge-font-display: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  /* Red Hat Mono, not IBM Plex Mono -- Plex's zero has a dot inside it (a
     disambiguate-0-from-O trick borrowed from coding fonts) which reads as a
     typo in a column of dollar amounts. Red Hat Mono keeps a plain oval
     zero while staying monospaced/tabular for financial alignment. */
  --edge-font-data: "Red Hat Mono", ui-monospace, SFMono-Regular, monospace;
  --edge-text-xs: 0.75rem;
  --edge-text-sm: 0.875rem;
  --edge-text-md: 1rem;
  --edge-text-lg: 1.25rem;
  --edge-text-xl: 1.75rem;
  --edge-text-hero: clamp(2rem, 4vw, 3.5rem);

  /* Weight scale, not a single hardcoded number per rule. Dark values here
     match what every component already used before this token existed
     (unchanged, dark was never the complaint). Light overrides below go
     noticeably lighter: bold dark-gray-on-white text at the same numeric
     weight as light-text-on-black reads far louder -- see the approved
     reference (INTERFACE_SYSTEM.md light-mode section) where only the one
     hero number per screen is actually bold; labels, captions, and table
     headers are regular weight throughout. */
  --edge-weight-label: 650;
  --edge-weight-heading: 700;
  --edge-weight-value: 700;
  --edge-weight-body: 500;

  --edge-space-1: 0.25rem;
  --edge-space-2: 0.5rem;
  --edge-space-3: 0.75rem;
  --edge-space-4: 1rem;
  --edge-space-5: 1.25rem;
  --edge-space-6: 1.5rem;
  --edge-space-8: 2rem;
  --edge-space-10: 2.5rem;
  --edge-space-12: 3rem;

  --edge-radius-sm: 0.5rem;
  --edge-radius-md: 0.75rem;
  --edge-radius-lg: 1rem;
  --edge-radius-pill: 999px;
  --edge-shadow-float: 0 18px 50px rgb(0 0 0 / 32%);
  /* Small resting-elevation shadows (selected pill/tab, static card) --
     dark keeps these barely-there since depth there already comes from
     glass/blur, not material shadow. */
  --edge-shadow-resting: 0 1px 3px rgb(0 0 0 / 20%);
  --edge-shadow-card: 0 1px 2px rgb(0 0 0 / 20%);
  /* One dim-behind-an-overlay color, not two independently-chosen ones
     (modal backdrop and drawer backdrop used to pick their own). Same
     value in both themes -- a scrim dims whatever's behind it the same
     way regardless of the page's own light/dark mode. */
  --edge-color-backdrop: rgb(16 16 18 / 42%);
  --edge-duration-fast: 120ms;
  --edge-duration-normal: 180ms;
  --edge-ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* One shared scale for every overlay instead of each component inventing
     its own number -- previously two unrelated things (drawer backdrop,
     page banner) shared 80 by coincidence, and this admin action menu
     for no reason sat 80 layers under a plain dropdown. */
  --edge-z-sticky: 30;
  --edge-z-popover: 60;
  --edge-z-overlay: 80;
  --edge-z-dropdown: 100;
  --edge-z-tooltip: 110;

  --edge-content-max: 90rem;
  --edge-sidebar-width: 15rem;
  --edge-header-height: 4.5rem;
  --edge-control-height: 2.5rem;
  --edge-focus-ring: none;
}

@media (prefers-color-scheme: light) {
  :root {
    --edge-color-canvas: #f5f7f9;
    --edge-color-surface: #ffffff;
    --edge-color-surface-raised: #ffffff;
    --edge-color-surface-hover: #f1f3f6;
    --edge-color-text: #16161a;
    --edge-color-text-subtle: #4a4945;
    --edge-color-text-muted: #74736e;
    --edge-color-border: #e2e0d9;
    --edge-color-accent: #2151c9;
    --edge-color-accent-soft: rgb(33 81 201 / 12%);
    --edge-color-positive: #12874f;
    --edge-color-positive-soft: #e5f6ec;
    --edge-color-warning: #a9660a;
    --edge-color-warning-soft: #fbecd6;
    --edge-color-negative: #c22a2f;
    --edge-color-negative-soft: #fbe6e6;
    --edge-color-pattern: #7759c2;
    --edge-color-category-a: #2151c9;
    --edge-color-category-b: #a8327d;
    --edge-color-category-c: #5f3dc4;
    --edge-color-category-d: #0c6b69;
    --edge-color-category-e: #a15a04;
    --edge-color-category-f: #3f6509;
    --edge-color-category-g: #8f3906;
    --edge-color-category-h: #334155;
    --edge-color-slot-0: #2151c9;
    --edge-color-slot-1: #a8327d;
    --edge-color-slot-2: #5f3dc4;
    --edge-color-slot-3: #0c6b69;
    --edge-color-slot-4: #a15a04;
    --edge-color-slot-5: #3f6509;
    --edge-color-slot-6: #8f3906;
    --edge-color-slot-7: #334155;
    --edge-shadow-float: 0 18px 50px rgb(35 42 55 / 14%);
    --edge-shadow-resting: 0 1px 3px rgb(16 24 40 / 10%);
    --edge-shadow-card: 0 1px 2px rgb(16 24 40 / 4%);
    /* Approved direction (2026-07-23): crisp opaque white cards + a soft
       shadow for depth, not translucency -- white-on-white blur doesn't
       read the way dark's glass-over-glow does. See INTERFACE_SYSTEM.md
       §2a. */
    --edge-glass-bg: var(--edge-color-surface);
    --edge-glass-border: var(--edge-color-border);
    --edge-glass-blur: 0px;
    /* A true none, not blur(0px) -- see the base definition's comment. */
    --edge-glass-backdrop-filter: none;
    --edge-glass-shadow: 0 1px 2px rgb(16 22 35 / 4%), 0 12px 32px rgb(16 22 35 / 6%);
    --edge-glow-positive: none;
    --edge-glow-accent: 0 8px 24px rgb(33 81 201 / 16%);
    /* Lighter across the board -- dark-gray-on-white at the same weight
       dark mode uses (light-text-on-black) reads as shouting. Values, not
       just labels, come down a step too: the reference keeps bold for
       exactly one thing per screen (the hero number, handled separately
       via .edge-summary-card--primary), everything else -- including
       secondary stat values -- is medium at most. */
    --edge-weight-label: 400;
    --edge-weight-heading: 600;
    --edge-weight-value: 600;
    --edge-weight-body: 400;
    /* The reference used one bold solid color for its CTA, not a shimmering
       multi-hue gradient -- dark's cyan-to-blue --edge-gradient-accent was
       never meant to carry over as-is, it just hadn't been overridden yet. */
    --edge-gradient-accent: var(--edge-color-accent);
    /* The dark near-black button text only had enough contrast against
       dark mode's bright cyan-to-blue gradient -- light's solid #2151c9
       accent needs light text instead. */
    --edge-color-on-accent: #ffffff;
    /* Soft organic pastel blobs behind the page, the light equivalent of
       dark's canvas glow -- same technique (radial gradients painted on
       body), colorful instead of a single flat tint. */
    --edge-canvas-glow:
      radial-gradient(32rem 32rem at 88% -4%, rgb(168 216 255 / 55%), transparent 70%),
      radial-gradient(26rem 26rem at 65% 22%, rgb(184 245 216 / 45%), transparent 70%),
      radial-gradient(24rem 24rem at 4% 92%, rgb(255 217 236 / 45%), transparent 70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --edge-duration-fast: 0ms;
    --edge-duration-normal: 0ms;
  }
}