/* AlphaEdge design tokens — derived from the public Docs & API portal palette. */

:root {
  color-scheme: light;

  /* Brand */
  --navy-900: #01113b;
  --navy-800: #0a1c4d;
  --navy-700: #16295f;
  --navy-300: #8fa6d8;
  --navy-100: #d9e7ff;
  --navy-050: #eef4ff;

  --orange-700: #b83400;
  --orange-500: #d95419;
  --orange-200: #ffb99d;
  --orange-050: #ffe9de;

  --green-900: #233807;
  --green-600: #3f7d1c;
  --green-100: #e7ffde;

  --amber-700: #8a5a00;
  --amber-100: #fff4d6;

  --red-700: #a11212;
  --red-100: #fde8e8;

  /* Neutrals */
  --ink: #202020;
  --ink-soft: #4b4b52;
  --ink-muted: #74747d;
  --ink-faint: #9b9ba3;

  --surface: #ffffff;
  --surface-1: #fbfbfc;
  --surface-2: #f6f6f6;
  --surface-3: #eeeef0;
  --surface-inset: #f9fafb;

  --border: #e4e4e7;
  --border-strong: #d3d3d8;
  --border-faint: #efeff1;

  /* Semantics */
  --accent: var(--navy-900);
  --accent-contrast: #ffffff;
  --accent-soft: var(--navy-050);
  --accent-border: #c7d7f5;
  /* Foreground for text sitting on --accent-soft. Split from --accent because
     the dark palette needs a much lighter ink than its interactive blue. */
  --accent-ink: var(--accent);

  --success: var(--green-600);
  --success-soft: var(--green-100);
  --success-ink: var(--green-900);
  --warning: var(--amber-700);
  --warning-soft: var(--amber-100);
  --danger: var(--red-700);
  --danger-soft: var(--red-100);
  --info: var(--navy-700);
  --info-soft: var(--navy-050);
  --highlight: var(--orange-700);
  --highlight-soft: var(--orange-050);

  /* Drop targets: the brand navy is almost black, so tinting with it reads as
     grey. A dedicated mid-blue keeps the affordance legible on both themes. */
  --drop-tint: #3b6fd4;

  /* Layout */
  --topbar-h: 64px;
  --sidebar-w: 236px;
  --content-max: 1680px;
  --view-pad-x: 26px;
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 8px;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 8px 20px -6px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.24);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;

  --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* The brand navy is almost black: on dark surfaces it disappears. Everything
     built on it — primary buttons, chart series, checkbox accents, switches —
     is lifted to a legible blue rather than patched rule by rule. */
  --navy-900: #5b83db;
  --navy-800: #4f79d4;
  --navy-700: #7ba2ee;
  --navy-300: #7d97cd;
  --navy-100: #24365f;
  --navy-050: #1c2a49;

  --ink: #ecedf0;
  --ink-soft: #c8cad1;
  --ink-muted: #9a9da7;
  --ink-faint: #83868f;

  --surface: #16171a;
  --surface-1: #1b1c20;
  --surface-2: #202126;
  --surface-3: #282a30;
  --surface-inset: #1d1e23;

  --border: #2e3037;
  --border-strong: #3b3e46;
  --border-faint: #26282e;

  --accent: #6a90e0;
  --accent-contrast: #0c1120;
  --accent-soft: #23345a;
  --accent-border: #3a5490;
  --accent-ink: #d7e3fb;

  --orange-050: #35201a;
  --orange-700: #ff9a6d;
  --green-100: #1d2c17;
  --green-600: #7cc24a;
  --green-900: #cfeeb6;
  --amber-100: #33290f;
  --amber-700: #e8b45c;
  --red-100: #34191b;
  --red-700: #f08b8b;

  --success: #7cc24a;
  --success-soft: #1d2c17;
  --success-ink: #cfeeb6;
  --warning: #e8b45c;
  --warning-soft: #33290f;
  --danger: #f08b8b;
  --danger-soft: #34191b;
  --info: #a8c1f3;
  --info-soft: #223150;
  --highlight: #ff9a6d;
  --highlight-soft: #35201a;
  --drop-tint: #7ba2ee;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}

/* Wide displays: a fixed measure leaves a broad empty gutter on either side of
   every module, so the content column and its padding grow with the viewport. */
@media (min-width: 1800px) {
  :root {
    --content-max: 1880px;
    --view-pad-x: 40px;
  }
}

@media (min-width: 2280px) {
  :root {
    --content-max: 2160px;
    --view-pad-x: 56px;
  }
}