/* TradeScope design tokens: the Bare Investfolio design language.
 *
 * The block marked "reference" is the reference tokens.css, verbatim (DESIGN.md section 13). The block
 * marked "TradeScope additions" holds values the reference does not define; each one says where it
 * comes from. This is the ONLY file allowed to contain colour literals or raw spacing values: the
 * token-lint test (tests/frontend/design-tokens.test.js) fails on any elsewhere.
 * See docs/DESIGN_SYSTEM.md for usage.
 */
:root {
  color-scheme: dark;

  /* ---------------- reference (DESIGN.md section 13) ---------------- */

  /* surfaces */
  --bg: #000000;
  --surface: #171717;
  --surface-bright: #2a2a2a;      /* reserved, level 3 */
  --outline: #3a3a3a;
  --outline-variant: #202020;

  /* text */
  --text: #ffffff;
  --text-secondary: #8a8a8e;
  --on-primary: #000000;

  /* brand and action */
  --primary: #cafc5b;
  --primary-container: #1f3a2b;
  --on-primary-container: #a8e0bf;
  --neutral-pill: #f2f2f2;         /* selected chip, neutral button */
  --on-neutral-pill: #000000;

  /* market direction and status */
  --success: #cafc5b;              /* up / positive */
  --danger: #e6718c;               /* down / negative */
  --warning: #f4c430;              /* worth noticing */
  --error: #e5484d;                /* failure / destructive */
  --on-error: #ffffff;
  --error-container: #4a1113;

  /* inverse (toast) */
  --inverse-surface: #f2f2f2;
  --inverse-on-surface: #000000;
  --inverse-primary: #3d5313;

  /* chart */
  --chart-bg: var(--surface);
  --chart-grid: var(--outline-variant);
  --chart-text: var(--text);
  --chart-up: var(--success);
  --chart-down: var(--danger);
  --chart-area-top-alpha: 0.35;
  --chart-area-bottom-alpha: 0;
  --chart-height: 200px;

  /* spacing (4px base) */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* shape */
  --radius-field: 8px;
  --radius-sm: 12px;
  --radius-card: 20px;
  --radius-overlay: 28px;
  --radius-pill: 9999px;

  /* elevation: none, by design */
  --shadow: none;

  /* motion */
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-slow: 400ms;
  --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display-sm: 30px;   --fw-display-sm: 700;
  --fs-headline-sm: 20px;  --fw-headline-sm: 600;
  --fs-title-lg: 20px;     --fw-title-lg: 600;
  --fs-title-md: 16px;     --fw-title-md: 600;
  --fs-title-sm: 14px;     --fw-title-sm: 600;
  --fs-body-lg: 16px;      --fw-body-lg: 400;
  --fs-body-md: 14px;      --fw-body-md: 400;
  --fs-body-sm: 12px;      --fw-body-sm: 400;
  --fs-label-lg: 14px;     --fw-label-lg: 500;
  --fs-label-md: 12px;     --fw-label-md: 500;
  --fs-label-sm: 11px;     --fw-label-sm: 500;

  /* ---------------- TradeScope additions ---------------- */

  /* DESIGN.md section 12: "hover on a card brightens it from #171717 to #1F1F1F". */
  --surface-hover: #1f1f1f;
  /* DESIGN.md 6.1: disabled container white at 12%, label white at 38%. */
  --disabled-bg: rgb(255 255 255 / 0.12);
  --disabled-text: rgb(255 255 255 / 0.38);
  /* Dialog/sheet scrim. DESIGN.md says "standard semi-transparent black"; wide-07 shows ~60%. */
  --scrim: rgb(0 0 0 / 0.6);
  /* DESIGN.md 6.17: skeleton = "translucent white shimmer over the card shape". */
  --skeleton: rgb(255 255 255 / 0.08);
  --skeleton-shine: rgb(255 255 255 / 0.14);
  /* Hover wash for transparent controls (icon buttons, menu rows): white at a low alpha, flat. */
  --hover-wash: rgb(255 255 255 / 0.06);
  /* Floating chart toolbars sit over the chart canvas: the card surface, slightly see-through. */
  --surface-float: rgb(23 23 23 / 0.92);
  /* DESIGN.md section 12: keyboard focus = 2 px lime ring with a 2 px gap. */
  --focus-ring-width: 2px;
  --focus-ring-gap: 2px;
  /* DESIGN.md section 12: long-table rows are 56 px; DESIGN.md 6.1/10: 40 px controls, 48 px targets. */
  --row-height: 56px;
  --row-height-dense: 40px;
  --control-height: 40px;
  --touch-target: 48px;
  --icon-size: 24px;
  --icon-size-sm: 16px;
  --trend-icon-size: 14px;          /* DESIGN.md 6.7: 14 dp arrow beside gain/loss text */
  /* DESIGN.md section 12: maximum content width about 1440 px; 16 px gutters. */
  --content-max: 1440px;
  --gutter: var(--space-md);
  --page-pad: var(--space-lg);
  /* Not in the reference: monospace for logs, code and the API-key reveal. System stack, no web font. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  /* Stacking layers (named so overlays never fight over magic numbers). */
  --z-chart-overlay: 10;
  --z-topbar: 100;
  --z-popover: 200;
  --z-dialog: 1000;
  --z-color-picker: 1200;
  --z-banner: 9000;
  --z-modal: 10000;
  /* Shared floating-toolbar button sizing (drawing toolbar + chart pill toolbar). Desktop is a bit
     bigger; the mobile values are the touch-reliable sizes confirmed live (CLAUDE.md dead-hit-target
     gotcha). Overridden in layout.css's mobile breakpoint. */
  --toolbar-btn-pad-v: 13px;
  --toolbar-btn-pad-h: 15px;
  --toolbar-btn-edge-bonus: 4px;
  /* Colour-picker transparency checkerboard (functional: shows a picked colour's alpha). */
  --checker-a: #808080;
  --checker-b: #b0b0b0;
  /* Chevron for selects, drawn in --text-secondary (an SVG data URI cannot read a CSS variable). */
  --select-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --chart-canvas-height: 600px;
  --chart-canvas-height-mobile: 440px;
  /* TradeScope: height of the sticky top bar; ui/topbar.js overwrites it with the measured height
     (one row on desktop, two on phones). Anchor/focus scrolling and the landscape chart use it. */
  --topbar-offset: 64px;
}