/* FlowDesk design tokens.
   Base palette, type and shape values are copied from the FlowSuite Framer template's computed CSS
   (https://flowsuite.framer.website). Views should use the semantic tokens (--bg, --panel, --text, --border...)
   so the dark theme works without extra CSS. */

:root {
  color-scheme: light;

  /* ---- FlowSuite palette (exact) ---- */
  --blue: #0454ff;
  --blue-light: #86b9ff;
  --blue-tint: #ebf1ff;
  --purple: #7e5bff;
  --black: #000;
  --ink: #3d3d3d;
  --muted: #6d6d6d;
  --line: #eaeaea;
  --surface: #f5f6f8;
  --white: #fff;
  --red: #ff5b5b;
  --red-tint: #fff2f2;

  /* ---- trading additions ---- */
  --green: #12b76a;
  --green-tint: #e9f9f1;
  --amber: #f59e0b;
  --amber-tint: #fff6e5;
  --purple-tint: #f1edff;
  --gold: #c99a06;
  --gold-tint: #fdf6dc;

  /* readable text on tints */
  --blue-ink: #0454ff;
  --red-ink: #c73a3a;
  --green-ink: #067a47;
  --amber-ink: #a35b00;
  --purple-ink: #5b3bd9;
  --gold-ink: #8a6a00;

  /* ---- semantic tokens (switch with the theme) ---- */
  --bg: #ffffff;              /* app background (template main area is white) */
  --bg-soft: var(--surface);  /* grey wells: segmented, inputs, table hover */
  --panel: #ffffff;           /* cards and panels */
  --panel-2: #fbfbfc;         /* nested panel / table header */
  --sidebar: #ffffff;
  --text: #000000;            /* headings and key numbers */
  --text-2: var(--ink);       /* body copy */
  --text-3: var(--muted);     /* labels, meta */
  --text-4: #9a9a9a;          /* placeholders, disabled */
  --border: var(--line);
  --border-strong: #dcdcdc;
  --hover: #f5f6f8;
  --active: #eef1f6;
  --overlay: rgba(10, 14, 24, 0.38);
  --on-blue: #ffffff;
  --focus-ring: rgba(4, 84, 255, 0.35);

  --up: var(--green);
  --up-ink: var(--green-ink);
  --up-tint: var(--green-tint);
  --down: var(--red);
  --down-ink: var(--red-ink);
  --down-tint: var(--red-tint);
  --flat: var(--muted);

  /* ---- type ---- */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;              /* small labels */
  --fs-md: 15px;
  --fs-base: 16px;            /* body 16px/1.4 */
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;             /* KPI number */
  --fs-4xl: 44px;
  --fs-hero: 64px;
  --lh: 1.4;
  --ls-body: -0.2px;
  --ls-head: -0.04em;         /* 64px -> -2.56px */
  --ls-tight: -0.02em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- shape ---- */
  --r-pill: 100px;            /* buttons */
  --r-tag: 48px;              /* tags, segmented */
  --r-seg: 24px;              /* active segment */
  --r-kpi: 12px;              /* KPI cards */
  --r-panel: 16px;            /* panels */
  --r-big: 24px;              /* big containers */
  --r-item: 8px;              /* sidebar active item, outline buttons, inputs */
  --r-sm: 6px;

  /* ---- elevation ---- */
  --shadow-card: 0 13px 37px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 18px 50px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-blue: 0 8px 24px rgba(4, 84, 255, 0.28);
  --tag-highlight: inset 0 0.5px 1px rgba(255, 255, 255, 0.23);

  /* ---- gradients ---- */
  --grad: linear-gradient(145deg, #0c6cff 0%, #53acfe 37%, #c1deff 58%);
  --grad-deep: linear-gradient(145deg, #0454ff 0%, #0c6cff 40%, #53acfe 100%);
  --glow: radial-gradient(60% 70% at 30% 20%, rgba(12, 108, 255, 0.55) 0%, rgba(83, 172, 254, 0.28) 45%, rgba(193, 222, 255, 0) 75%);

  /* ---- heatmap scale (white -> blue-light -> blue -> navy) ---- */
  --heat-0: #ffffff;
  --heat-1: #86b9ff;
  --heat-2: #0454ff;
  --heat-3: #001a66;

  /* ---- chart ---- */
  --chart-grid: #f0f1f4;
  --chart-text: #6d6d6d;
  --chart-area-top: rgba(4, 84, 255, 0.18);
  --chart-area-bottom: rgba(4, 84, 255, 0.0);

  /* ---- spacing ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --gap: 20px;
  --gutter: 32px;             /* page side padding (16px on phones) */

  /* ---- shell sizes ---- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 80px;
  --topbar-h: 72px;
  --tabbar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ---- layers ---- */
  --z-sticky: 20;
  --z-sidebar: 30;
  --z-tabbar: 40;
  --z-popover: 60;
  --z-drawer: 70;
  --z-modal: 80;
  --z-toast: 90;
}

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

  --blue: #2f6bff;
  --blue-light: #6fa5ff;
  --blue-tint: rgba(47, 107, 255, 0.16);
  --purple: #9a7dff;
  --ink: #c9ced8;
  --muted: #8d95a5;
  --line: #242a36;
  --surface: #181c25;
  --red: #ff6b6b;
  --red-tint: rgba(255, 91, 91, 0.14);
  --green: #22c983;
  --green-tint: rgba(18, 183, 106, 0.15);
  --amber: #fbb02d;
  --amber-tint: rgba(245, 158, 11, 0.15);
  --purple-tint: rgba(126, 91, 255, 0.18);
  --gold: #e3b62a;
  --gold-tint: rgba(227, 182, 42, 0.15);

  --blue-ink: #8db4ff;
  --red-ink: #ff8f8f;
  --green-ink: #4fe0a3;
  --amber-ink: #ffc35c;
  --purple-ink: #b9a4ff;
  --gold-ink: #f0cb5a;

  --bg: #0c0e13;
  --bg-soft: #161a22;
  --panel: #12151c;
  --panel-2: #151922;
  --sidebar: #0f1218;
  --text: #f4f6fa;
  --text-2: #c9ced8;
  --text-3: #8d95a5;
  --text-4: #5d6575;
  --border: #232833;
  --border-strong: #2e3542;
  --hover: #181d27;
  --active: #1d2330;
  --overlay: rgba(0, 0, 0, 0.6);
  --focus-ring: rgba(47, 107, 255, 0.5);

  --shadow-card: 0 13px 37px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-blue: 0 8px 24px rgba(47, 107, 255, 0.35);

  --glow: radial-gradient(60% 70% at 30% 20%, rgba(12, 108, 255, 0.35) 0%, rgba(83, 172, 254, 0.12) 45%, rgba(193, 222, 255, 0) 75%);

  --heat-0: #0c0e13;
  --heat-1: #1d3f86;
  --heat-2: #2f6bff;
  --heat-3: #bcd4ff;

  --chart-grid: #1a1f29;
  --chart-text: #8d95a5;
  --chart-area-top: rgba(47, 107, 255, 0.28);
  --chart-area-bottom: rgba(47, 107, 255, 0.0);
}

@media (max-width: 899px) {
  :root {
    --gutter: 16px;
    --gap: 16px;
    --topbar-h: 60px;
  }
}