/* v2 tokens for theme "trade-desk" v1.0.0 */
:root {
  /* colours */
  --sage-50: #12212b;
  --sage-100: #162c39;
  --sage-200: #1d3d4f;
  --sage-300: #265069;
  --sage-500: #6BA9D6;
  --sage-700: #4C8FBF;
  --sage-800: #3C769F;
  --sage-900: #2E5C7C;
  --terra-50: #2e2617;
  --terra-100: #453720;
  --terra-500: #D8A657;
  --terra-700: #E3B972;
  --terra-800: #EBC98D;
  --neutral-0: #1C2024;
  --neutral-50: #171A1E;
  --neutral-100: #232830;
  --neutral-200: #2B313A;
  --neutral-300: #343B43;
  --neutral-400: #4A525C;
  --neutral-500: #8A939D;
  --neutral-600: #9AA3AD;
  --neutral-800: #DDE2E7;
  --neutral-900: #EEF1F4;
  --success-bg: #122A18;
  --success-fg: #3FB950;
  --warn-bg: #2E2617;
  --warn-fg: #D8A657;
  --error-bg: #2E1A18;
  --error-fg: #F0564A;
  --info-bg: #152833;
  --info-fg: #6BA9D6;
  --surface-page: #14171A;
  --surface-card: #1C2024;
  --surface-raised: #232830;
  --surface-overlay: rgba(6,9,12,0.68);
  --surface-inverse: #EEF1F4;
  --surface-rail: #171A1E;
  --surface-2: rgba(255,255,255,0.04);
  --border-subtle: #262B31;
  --border-strong: #343B43;
  --focus-ring: 0 0 0 3px rgba(107,169,214,0.40);
  --focus-ring-terra: 0 0 0 3px rgba(216,166,87,0.35);
  --green: #4C8FBF;
  --green-light: #6BA9D6;
  --green-pale: #12212b;
  --terracotta: #D8A657;
  --terracotta-light: #E3B972;
  --cream: #14171A;
  --beige: #232830;
  --brown: #9AA3AD;
  --text: #DDE2E7;
  --text-light: #8A939D;
  --white: #1C2024;
  /* typography */
  --font-display: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-display: 3rem;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.14em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  /* radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-full: 9999px;
  /* shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.36);
  --shadow-lg: 0 6px 18px rgba(0,0,0,0.44);
  --shadow-xl: 0 12px 32px rgba(0,0,0,0.52);
  /* motion */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --transition: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  /* layout */
  --touch-min: 48px;
  --max-content-width: 900px;
  --max-content-width-wide: 1200px;
  --sidebar-width: 240px;
  --sidebar-width-compact: 64px;
  --header-height: 52px;
  --bottom-nav-height: 64px;
  /* z */
  --z-base: 0;
  --z-sticky: 20;
  --z-nav: 100;
  --z-bottom-nav: 150;
  --z-overlay: 199;
  --z-side-nav: 200;
  --z-modal: 1000;
  --z-sheet: 1999;
  --z-toast: 9999;
  /* avatar */
  --avatar-xs: 22px;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --avatar-lg: 64px;
  --avatar-xl: 96px;
  /* icon */
  --icon-style: svg;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-stroke: 1.5px;
}

/* inherited from "gather-earth" — theme.css */
/* ── GatherOS Theme: Earth (Default) — v2 ─────────────────────────
   Token values live in theme.json (the v2 contract). This file is
   reserved for behaviour beyond tokens (animations, gradients,
   component-specific overrides). The default theme doesn't need any
   — the migrated tokens render the entire app — so this file ships
   intentionally empty.

   Author note: anything you'd be tempted to put here that's a colour,
   size, radius, shadow, or motion VALUE belongs in theme.json. CSS
   here is for component selectors that need behaviour beyond what
   tokens can express (e.g. dark-mode component overrides, anime
   sparkles, brand-specific gradients).
   ──────────────────────────────────────────────────────────────── */

/* inherited from "gather-night" — theme.css */
/* ── GatherOS Theme: Night — v2 ───────────────────────────────────
   Dark mode — charcoal backgrounds, soft green accents, warm amber
   highlights. Designed for evening use, projector screens, and
   users who prefer dark interfaces.

   Token values live in theme.json (the v2 contract). This file is
   for behaviour beyond tokens — component-specific dark-mode overrides
   that the cascade alone can't reach (form inputs, scrollbars, code
   blocks etc. that need surface swaps the token system doesn't
   express directly).
   ──────────────────────────────────────────────────────────────── */

/* Dark mode meta — tells the browser to render form widgets in dark */
body {
  color-scheme: dark;
}

/* Cards, modals, inputs need explicit dark backgrounds */
.card, .modal, .panel, .popup, .dropdown,
.task-card, .area-card, .project-card,
.stat-card, .health-card, .section-card,
.settings-section, .plugin-card {
  background: var(--beige);
  border-color: var(--border-strong);
}

input, select, textarea, .search-input,
.form-input, .form-select, .form-textarea {
  background: var(--neutral-100);
  border-color: var(--neutral-300);
  color: var(--text);
}

input::placeholder, textarea::placeholder {
  color: var(--text-light);
}

/* Tables */
table th {
  background: var(--neutral-100);
  color: var(--text);
}

table td {
  border-color: var(--border-strong);
}

table tr:hover td {
  background: var(--neutral-100);
}

/* Buttons — ensure contrast */
.btn--secondary, .btn--outline {
  border-color: var(--neutral-400);
  color: var(--text);
}

.btn--secondary:hover, .btn--outline:hover {
  background: var(--border-strong);
}

/* Tags, badges, chips */
.badge, .tag, .chip, .status-chip {
  background: var(--border-strong);
  color: var(--text);
}

/* Scroll bars */
::-webkit-scrollbar-track {
  background: var(--cream);
}

::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
}

/* Side nav dark */
.side-nav {
  background: var(--cream);
  border-right-color: var(--neutral-100);
}

.side-nav-link:hover, .side-nav-link.active {
  background: var(--neutral-100);
}

.side-nav-header {
  border-bottom-color: var(--neutral-100);
}

.side-nav-footer {
  border-top-color: var(--neutral-100);
}

/* Bottom nav dark */
.bottom-nav {
  background: var(--cream);
  border-top-color: var(--neutral-100);
}

/* Header dark */
.gather-header {
  background: var(--cream);
  border-bottom-color: var(--neutral-100);
}

/* Modals */
.modal-overlay {
  background: var(--surface-overlay);
}

.modal-content, .modal-body {
  background: var(--cream);
}

/* Calendar dark tweaks */
.cal-day {
  border-color: var(--border-strong);
}

.cal-day:hover {
  background: var(--neutral-100);
}

.cal-day.today {
  background: rgba(74,140,63,0.15);
}

/* Kanban columns */
.kanban-column {
  background: var(--neutral-100);
}

/* Tab bars */
.tab-bar, .tabs {
  border-bottom-color: var(--border-strong);
}

.tab.active, .tab-btn.active {
  border-bottom-color: var(--green);
  color: var(--green-light);
}

/* Dividers */
hr, .divider, .side-nav-divider {
  border-color: var(--border-strong);
}

/* Links — brighter for dark bg */
a {
  color: var(--green-light);
}

a:hover {
  color: var(--sage-300);
}

/* Code blocks */
pre, code {
  background: var(--neutral-100);
  color: var(--neutral-600);
}

/* Progress bars */
.progress-bar {
  background: var(--border-strong);
}

/* theme.css */
/* ── GatherOS Theme: Trade Desk — v2 ──────────────────────────────
   Sober low-glare slate for long sessions in front of charts and tables.
   Inherits the dark foundation from gather-night (which inherits structure
   from gather-earth), then retunes the action family from sage green to
   steel blue.

   🔴 WHY THE ACTION COLOUR IS NOT GREEN
   In a trading interface green and red are DATA — profit and loss. Every
   other GatherOS theme uses sage green as the primary action colour, which
   makes a profitable number and a primary button the same colour. Here the
   only saturated green and red on the page are --success-fg / --error-fg,
   and they mean money. Don't reintroduce green as a brand colour.

   Almost everything is expressed as TOKENS in theme.json — that is the point
   of the v2 contract, and it is what lets a later design pass replace the
   look by editing values rather than CSS. This file carries only the few
   things a token cannot say.
   ──────────────────────────────────────────────────────────────── */

/* Dense numeric data reads badly in proportional figures: columns of prices,
   R-multiples and durations fail to line up digit-for-digit. Tabular figures
   are a font FEATURE, not a colour, so no token can express it. */
table,
.rl-tbl,
.dm-tbl,
.tr-stat .v,
.tr-pos,
.tr-neg {
  font-variant-numeric: tabular-nums;
}

/* On a near-black page a 1px hairline at low contrast disappears on some
   panels; nudging table rules to the strong border keeps dense tables legible
   without raising overall brightness. */
.rl-tbl th,
.dm-tbl th {
  border-bottom-color: var(--border-strong, #343B43);
}

/* Charts render their own canvas and do not read tokens. Give the chart
   surface the page colour so a light-themed chart widget doesn't sit in a
   bright rectangle on a dark page. */
.chart-pane,
#chartRoot {
  background: var(--surface-page, #14171A);
}