/*
 * Canonical frontend tokens.
 *
 * Ownership flows in one direction:
 *   primitive values -> semantic meaning -> component contracts.
 * Historical variable names remain aliases so page CSS can migrate without
 * changing the rendered interface.
 */

:root {
  color-scheme: light;

  /* Primitive tokens */
  --color-white: #ffffff;
  --color-gray-25: #fcfcfd;
  --color-gray-50: #f8f9fb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-500: #6b7280;
  --color-gray-700: #374151;
  --color-gray-900: #1f2937;
  --color-shell-canvas: #f4f5f7;
  --color-page-canvas: #f4f5f7;
  --color-surface-muted: #f2f3f5;
  --color-surface-subtle: #f8f9fb;
  --color-border: #eceded;
  --color-border-strong: #dee0e3;
  --color-text-primary: #1f2329;
  --color-text-secondary: #646a73;
  --color-text-tertiary: #8f959e;
  --color-action-base: #3370ff;
  --color-action-base-hover: #2b5fd9;
  --color-action-base-soft: #eaf1fe;
  --color-action: #3370ff;
  --color-action-hover: #2b5fd9;
  --color-action-soft: #eaf1fe;
  --color-action-press: #2456b8;
  --color-action-line: #c7d8fb;
  --color-market-up-base: #e04536;
  --color-market-up-base-soft: #fdecea;
  --color-market-up: #e04536;
  --color-market-up-soft: #fdecea;
  --color-market-down-base: #16a34a;
  --color-market-down-base-soft: #e9f7ee;
  --color-market-down: #16a34a;
  --color-market-down-soft: #e9f7ee;
  --color-warning-base: #b45309;
  --color-warning-base-soft: #fdf3e3;
  --color-warning: #b45309;
  --color-warning-soft: #fdf3e3;

  --size-radius-sm: 4px;
  --size-radius-md: 8px;
  --size-radius-lg: 10px;
  --size-radius-dialog: 12px;
  --size-control: 32px;
  --size-sidebar: 200px;
  --size-topbar: 64px;
  --size-summary: 0px;
  --size-statusbar: 38px;
  --size-page-pad-y: 14px;
  --size-page-pad-x: 16px;
  --size-card-gap: 12px;

  --elevation-card: 0 1px 2px rgba(31, 35, 41, .04);
  --elevation-soft: 0 1px 2px rgba(31, 35, 41, .04);
  --elevation-raised: 0 2px 6px rgba(31, 35, 41, .04), 0 8px 24px rgba(31, 35, 41, .06);
  --elevation-float: 0 12px 32px rgba(0, 0, 0, .14);
  --motion-instant: 100ms;
  --motion-fast: 120ms;
  --motion-medium: 200ms;
  --motion-deliberate: 260ms;
  --motion-slow: 560ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Semantic tokens */
  --canvas: var(--color-shell-canvas);
  --surface: var(--color-white);
  --surface-muted: var(--color-surface-muted);
  --surface-subtle: var(--color-surface-subtle);
  --surface-canvas: var(--color-page-canvas);
  --surface-raised: var(--color-white);
  --surface-sunken: #eef0f3;
  --header-bg: var(--color-white);
  --surface-hover: #f2f3f5;
  --surface-selected: #eaf1fe;
  --hover: var(--surface-hover);
  --selected: var(--surface-selected);
  --surface-overlay: var(--color-white);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --border-subtle: #eef0f3;
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --text-inverse: #ffffff;
  --on-action: #ffffff;
  --action: var(--color-action-base);
  --action-hover: var(--color-action-base-hover);
  --action-press: var(--color-action-press);
  --action-soft: var(--color-action-base-soft);
  --accent: var(--action);
  --accent-hover: var(--action-hover);
  --accent-press: var(--action-press);
  --accent-soft: var(--action-soft);
  --market-up: var(--color-market-up-base);
  --market-up-soft: var(--color-market-up-base-soft);
  --market-down: var(--color-market-down-base);
  --market-down-soft: var(--color-market-down-base-soft);
  --warning-color: var(--color-warning-base);
  --warning-soft: var(--color-warning-base-soft);
  --control-surface: var(--surface-raised);
  --control-hover: var(--surface-hover);
  --control-border: var(--border-strong);
  --table-header: var(--surface-subtle);
  --table-hover: #f8faff;
  --table-selected: var(--surface-selected);
  --focus-ring: rgba(51, 112, 255, .15);
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-tertiary);
  --warn: var(--warning-color);
  --warn-soft: var(--warning-soft);
  --backdrop: rgba(17, 24, 39, .48);
  --primary: var(--color-action);
  --primary-hover: var(--color-action-hover);
  --danger: var(--color-market-up);
  --success: var(--color-market-down);
  --warning: var(--color-warning);

  /* Component tokens */
  --card-bg: var(--surface-raised);
  --card-border: var(--border);
  --card-radius: var(--size-radius-lg);
  --card-shadow: var(--elevation-card);
  --control-height: var(--size-control);
  --page-gap: var(--size-card-gap);
  --radius-sm: var(--size-radius-sm);
  --radius-md: var(--size-radius-md);
  --radius-lg: var(--size-radius-lg);
  --shadow-xs: var(--elevation-card);
  --shadow-sm: var(--elevation-raised);
  --shadow-card: var(--elevation-card);
  --shadow-raised: var(--elevation-raised);
  --shadow-float: var(--elevation-float);
  --duration-fast: 150ms;
  --duration-normal: 220ms;

  --font-size-aux: 11.5px;
  --font-size-caption: 12.5px;
  --font-size-label: 13px;
  --font-size-table: 13.5px;
  --font-size-body: 14px;
  --font-size-chat: 14px;
  --font-size-card-title: 15px;
  --font-size-page-title: 18px;
  --font-size-metric: 24px;
  --font-size-hero: 30px;
  --fs-aux: var(--font-size-aux);
  --fs-caption: var(--font-size-caption);
  --fs-label: var(--font-size-label);
  --fs-table: var(--font-size-table);
  --fs-body: var(--font-size-body);
  --fs-chat: var(--font-size-chat);
  --fs-card-title: var(--font-size-card-title);
  --fs-page-title: var(--font-size-page-title);
  --fs-metric: var(--font-size-metric);
  --fs-hero: var(--font-size-hero);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;

  --sidebar-width: var(--size-sidebar);
  --sidebar-compact-width: 64px;
  --topbar-height: var(--size-topbar);
  --header-pad-x: 20px;
  --header-cluster-gap: 24px;
  --header-action-gap: 6px;
  --header-command-gap: 6px;
  --header-tape-metric-pad-x: 16px;
  --header-tape-toggle-gap: 14px;
  --header-page-context-min: 148px;
  --header-page-context-max: 280px;
  --summary-height: var(--size-summary);
  --statusbar-height: var(--size-statusbar);
  --page-pad-y: var(--size-page-pad-y);
  --page-pad-x: var(--size-page-pad-x);
  --card-gap: var(--size-card-gap);
  --workspace-height: calc(100vh - var(--topbar-height) - var(--statusbar-height));
  --content-height: calc(var(--workspace-height) - var(--summary-height));
  --table-wide: 1180px;
  --table-medium: 930px;
  --table-compact: 720px;
  --col-rank: 44px;
  --col-date: 94px;
  --col-stock: 160px;
  --col-number: 96px;
  --col-action: 96px;
  --col-text: 220px;
  --right-rail-wide: 372px;
  --pool-table-max-height: calc(var(--content-height) - var(--topbar-height) - var(--page-pad-y) - var(--page-pad-y) - var(--card-gap));
  --sentiment-history-max-height: 510px;
  --sentiment-history-min-height: 220px;
  --primary-share: 1.45fr;
  --secondary-share: .75fr;
  --mobile-nav-height: 64px;
  --mobile-header-height: 52px;
  --mobile-tab-height: 56px;
  --mobile-touch-size: 44px;
  --mobile-date-width: 116px;
  --mobile-nav-icon-size: 20px;
  --mobile-chart-height: 240px;
  --mobile-table-min-height: 260px;
  --mobile-phase-badge-width: 88px;
  --mobile-summary-card-width: 124px;
  --mobile-shell-pad: var(--space-8);
  --mobile-page-pad: var(--space-12);
  --mobile-min-width: 320px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-content-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + var(--mobile-page-pad));
  --mobile-layer-header: 50;
  --mobile-layer-nav: 70;
  --mobile-layer-menu: 80;
  --mobile-layer-backdrop: 75;
  --font-aux: var(--font-size-aux);

  --dragon-profile-list-width: 340px;
  --dragon-profile-detail-min-height: 460px;
  --dragon-profile-list-max-height: 320px;
  --dragon-profile-row-min-height: 64px;
  --dragon-profile-row-avatar-size: 36px;
  --dragon-profile-avatar-size: 72px;
  --dragon-profile-control-height: 33px;
  --dragon-profile-gap: 12px;
  --dragon-profile-panel-padding: 16px;
  --dragon-profile-row-padding: 10px 12px;
  --dragon-profile-title-font: 18px;
  --dragon-profile-name-font: 13px;
  --dragon-profile-body-font: 12px;
  --dragon-profile-meta-font: 11px;
  --dragon-profile-transition: 160ms ease;
  --dragon-profile-border-width: 1px;
  --dragon-profile-focus-width: 2px;
  --dragon-profile-focus-offset: -2px;
  --dragon-profile-radius-inset: 2px;
  --dragon-profile-body-line-height: 1.75;
  --dragon-profile-icon-stroke: 1;
  --dragon-profile-weight-strong: 750;
  --dragon-profile-weight-semibold: 600;

  --mentor-directory-width: 300px;
  --mentor-pane-header-height: 56px;
  --mentor-avatar-size: 40px;
  --mentor-message-avatar-size: 36px;
  --mentor-chat-avatar-size: 38px;
  --mentor-profile-avatar-size: 68px;
  --mentor-composer-min-height: 85px;
  --mentor-message-max-width: 60%;

  --chart-background: #fbfcfd;
  --chart-grid: #e2e8ec;
  --chart-axis: #6c7983;
  --chart-zero: #aeb7c1;
  --chart-line: #1d65c1;
  --chart-average: #b7791f;
  --chart-up: #c93f45;
  --chart-down: #087a55;
  --chart-up-volume: rgba(201, 63, 69, .58);
  --chart-down-volume: rgba(8, 122, 85, .58);
  --chart-area: rgba(37, 99, 235, .07);
  --chart-alert-area: rgba(224, 69, 54, .05);
  --chart-moving-average: #d1d5db;
  --chart-repair: #f59e0b;
  --chart-ma-10: #a76500;
  --chart-ma-20: #626c78;

  /* Compatibility aliases. Do not add new usage of these names. */
  --xb-gray-25: var(--color-gray-25);
  --xb-gray-50: var(--color-gray-50);
  --xb-gray-100: var(--color-gray-100);
  --xb-gray-200: var(--color-gray-200);
  --xb-gray-300: var(--color-gray-300);
  --xb-gray-500: var(--color-gray-500);
  --xb-gray-700: var(--color-gray-700);
  --xb-gray-900: var(--color-gray-900);
  --xb-blue-50: #eef4ff;
  --xb-blue-100: #dce8ff;
  --xb-blue-500: var(--color-action);
  --xb-blue-600: var(--color-action-hover);
  --xb-red-50: #fff1f0;
  --xb-red-500: var(--color-market-up);
  --xb-green-50: #ecf9f1;
  --xb-green-500: var(--color-market-down);
  --xb-amber-50: #fff7e8;
  --xb-amber-500: var(--color-warning);

  --bg: var(--surface-canvas);
  --card: var(--surface-raised);
  --ink: var(--text-primary);
  --sub: var(--text-secondary);
  --faint: var(--text-tertiary);
  --line: var(--border);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --blue: var(--primary);
  --blue-d: var(--primary-hover);
  --blue-dark: var(--action-hover);
  --blue-soft: var(--color-action-soft);
  --blue-line: var(--color-action-line);
  --up: var(--danger);
  --up-soft: var(--color-market-up-soft);
  --down: var(--success);
  --down-soft: var(--color-market-down-soft);
  --coral: var(--market-up);
  --coral-soft: var(--market-up-soft);
  --green: var(--market-down);
  --green-soft: var(--market-down-soft);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-soft);
  --radius: var(--size-radius-lg);
  --shadow: var(--elevation-card);
  --shadow-soft: var(--elevation-soft);

  --r2-blue: var(--primary);
  --r2-blue-dark: var(--primary-hover);
  --r2-blue-soft: var(--color-action-soft);
  --r2-blue-line: var(--color-action-line);
  --r2-up: var(--danger);
  --r2-up-soft: var(--color-market-up-soft);
  --r2-down: var(--success);
  --r2-down-soft: var(--color-market-down-soft);
  --r2-amber: var(--color-warning);
  --r2-amber-soft: var(--color-warning-soft);
  --r2-ink: var(--text-primary);
  --r2-sub: var(--text-secondary);
  --r2-faint: var(--text-tertiary);
  --r2-line: var(--border);
  --r2-line-soft: var(--border-subtle);
  --r2-bg: var(--surface-canvas);
  --r2-card: var(--surface-raised);
  --r2-radius: var(--size-radius-lg);
  --r2-shadow: var(--elevation-card);

  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #141519;
  --header-bg: #1c1e23;
  --surface: #232529;
  --surface-muted: #2a2d33;
  --surface-subtle: #202329;
  --surface-canvas: var(--canvas);
  --surface-raised: var(--surface);
  --surface-sunken: #191b1f;
  --surface-hover: #2a2d33;
  --surface-selected: #2b3b58;
  --surface-overlay: #232529;
  --hover: var(--surface-hover);
  --selected: var(--surface-selected);
  --border: #2b2e34;
  --border-strong: #3a3e47;
  --border-subtle: #2b2e34;
  --text-primary: #e8eaed;
  --text-secondary: #a9adb3;
  --text-tertiary: #7c828a;
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-tertiary);
  --text-inverse: #ffffff;
  --action: #5b8def;
  --action-hover: #7ba5f5;
  --action-press: #3465c4;
  --action-soft: #2b3b58;
  --accent: var(--action);
  --accent-hover: var(--action-hover);
  --accent-press: var(--action-press);
  --accent-soft: var(--action-soft);
  --market-up: #f26762;
  --market-up-soft: #3d2829;
  --market-down: #43bc8a;
  --market-down-soft: #22362c;
  --warning-color: #e2ad58;
  --warning-soft: #3d3220;
  --warn: var(--warning-color);
  --warn-soft: var(--warning-soft);
  --control-surface: #232529;
  --control-hover: #2a2d33;
  --control-border: #3a3e47;
  --table-header: #202329;
  --table-hover: #2a2d33;
  --table-selected: #2b3b58;
  --focus-ring: rgba(91, 141, 239, .25);
  --elevation-card: 0 1px 2px rgba(0, 0, 0, .28);
  --elevation-soft: 0 1px 2px rgba(0, 0, 0, .28);
  --elevation-raised: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .35);
  --elevation-float: 0 12px 32px rgba(0, 0, 0, .46);
  --shadow-card: var(--elevation-card);
  --shadow-raised: var(--elevation-raised);
  --backdrop: rgba(0, 0, 0, .66);
  --primary: var(--action);
  --primary-hover: var(--action-hover);
  --danger: var(--market-up);
  --success: var(--market-down);
  --warning: var(--warning-color);
  --card-bg: var(--surface);
  --card-border: var(--border);

  --xb-gray-25: var(--surface);
  --xb-gray-50: var(--surface-muted);
  --xb-gray-100: var(--canvas);
  --xb-gray-200: var(--border);
  --xb-gray-300: var(--border-strong);
  --xb-gray-500: var(--text-secondary);
  --xb-gray-700: #cbd1d7;
  --xb-gray-900: var(--text-primary);
  --xb-blue-50: var(--action-soft);
  --xb-blue-100: #294866;
  --xb-blue-500: var(--action);
  --xb-blue-600: var(--action-hover);
  --xb-red-50: var(--market-up-soft);
  --xb-red-500: var(--market-up);
  --xb-green-50: var(--market-down-soft);
  --xb-green-500: var(--market-down);
  --xb-amber-50: var(--warning-soft);
  --xb-amber-500: var(--warning-color);

  --bg: var(--canvas);
  --card: var(--surface);
  --ink: var(--text-primary);
  --sub: var(--text-secondary);
  --faint: var(--text-tertiary);
  --line: var(--border);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --blue: var(--action);
  --blue-d: var(--action-hover);
  --blue-dark: var(--action-hover);
  --blue-soft: var(--action-soft);
  --blue-line: #42698e;
  --up: var(--market-up);
  --up-soft: var(--market-up-soft);
  --down: var(--market-down);
  --down-soft: var(--market-down-soft);
  --coral: var(--market-up);
  --coral-soft: var(--market-up-soft);
  --green: var(--market-down);
  --green-soft: var(--market-down-soft);
  --amber: var(--warning-color);
  --amber-soft: var(--warning-soft);
  --r2-blue: var(--action);
  --r2-blue-dark: var(--action-hover);
  --r2-blue-soft: var(--action-soft);
  --r2-blue-line: #42698e;
  --r2-up: var(--market-up);
  --r2-up-soft: var(--market-up-soft);
  --r2-down: var(--market-down);
  --r2-down-soft: var(--market-down-soft);
  --r2-amber: var(--warning-color);
  --r2-amber-soft: var(--warning-soft);
  --r2-ink: var(--text-primary);
  --r2-sub: var(--text-secondary);
  --r2-faint: var(--text-tertiary);
  --r2-line: var(--border);
  --r2-line-soft: var(--border-subtle);
  --r2-bg: var(--canvas);
  --r2-card: var(--surface);
  --r2-shadow: var(--shadow-soft);

  --dialog-ink: var(--text-primary);
  --dialog-line: var(--border);
  --heaven-paper: #191a18;
  --heaven-paper-soft: #20211e;
  --heaven-ink: #e5e0d4;
  --heaven-muted: #aaa497;
  --heaven-rule: #3d3a34;
  --chart-background: #181b1e;
  --chart-grid: #30363c;
  --chart-axis: #a3adb6;
  --chart-zero: #68737d;
  --chart-line: #6ca8e8;
  --chart-average: #e2ad58;
  --chart-up: #f06d73;
  --chart-down: #43bc8a;
  --chart-up-volume: rgba(240, 109, 115, .52);
  --chart-down-volume: rgba(67, 188, 138, .52);
  --chart-area: rgba(108, 168, 232, .12);
  --chart-alert-area: rgba(240, 109, 115, .09);
  --chart-moving-average: #69737d;
  --chart-repair: #e2ad58;
  --chart-ma-10: #d39a45;
  --chart-ma-20: #9aa5af;
  --on-action: #101418;
  --warning-line: #6d5a38;
  --warning-line-strong: #66502d;
  --control-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  --dialog-backdrop: var(--backdrop);
  --ladder-level-1: #2d2426;
  --ladder-level-2: #2b2822;
  --ladder-level-3: #252a2d;
  --ladder-level-4: #20282b;
  --ladder-level-5: #202428;
  --heat-strong-bg: #304f7a;
  --heat-strong-ink: #f2f6fb;
  --heat-warm-bg: #2b405f;
  --heat-warm-ink: #dfeaf7;
  --heat-mild-bg: #293440;
  --heat-mild-ink: #c7d2dc;
  --heaven-field-bg: #23241f;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .16);
  --shadow: 0 18px 50px rgba(0, 0, 0, .46);
}

@media (min-width: 1280px) and (max-width: 1919px) {
  :root {
    --header-pad-x: 12px;
    --header-cluster-gap: 8px;
    --header-action-gap: 4px;
    --header-command-gap: 4px;
    --header-tape-metric-pad-x: 6px;
    --header-tape-toggle-gap: 4px;
    --header-page-context-min: 96px;
    --header-page-context-max: 148px;
  }
}