/* Trade Market tokens. Generated by tools/build.py from tokens/*.json. Do not edit by hand. */
/* Roles (layer 2) are written as values; palette (layer 1) stays in tokens/palette.json.
   Component tokens (layer 3) are written as var() references to roles. */

/* Dark is the default. Light follows the system setting unless data-theme says otherwise. */
:root {
  color-scheme: dark;
  --tm-color-bg: #111418;
  --tm-color-panel: #171B21;
  --tm-color-raised: #1E232B;
  --tm-color-divider: #262C35;
  --tm-color-divider-strong: #343B46;
  --tm-color-border-control: #626A77;
  --tm-color-text: #E6E8EB;
  --tm-color-text-secondary: #8C939D;
  --tm-color-text-faint: #6B727D;
  --tm-color-primary: #366EE9;
  --tm-color-primary-hover: #2C62DC;
  --tm-color-primary-pressed: #2556C4;
  --tm-color-on-primary: #FFFFFF;
  --tm-color-primary-text: #6EA0FF;
  --tm-color-primary-tint: rgb(110 160 255 / 0.13);
  --tm-color-primary-tint-strong: rgb(110 160 255 / 0.2);
  --tm-color-focus: #6EA0FF;
  --tm-color-up: #2EBD85;
  --tm-color-on-up: #111418;
  --tm-color-up-tint: rgb(46 189 133 / 0.13);
  --tm-color-down: #F0616D;
  --tm-color-on-down: #111418;
  --tm-color-down-tint: rgb(240 97 109 / 0.13);
  --tm-color-warning: #E5A93B;
  --tm-color-warning-tint: rgb(229 169 59 / 0.13);
  --tm-color-hover: rgb(255 255 255 / 0.04);
  --tm-color-pressed: rgb(255 255 255 / 0.08);
  --tm-color-scrim: rgb(0 0 0 / 0.55);
  --tm-color-skeleton: #262C35;
  --tm-shadow-none: 0px 0px 0px 0px #00000000;
  --tm-shadow-overlay: 0px 18px 40px -22px #000000B3;
  --tm-font-family-inter: "Inter", "Segoe UI", system-ui, sans-serif;
  --tm-font-family-geist: "Geist", "Segoe UI", system-ui, sans-serif;
  --tm-font-family-mono: "Geist Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --tm-font-family-sinhala: "Noto Sans Sinhala", "Iskoola Pota", sans-serif;
  --tm-font-family-tamil: "Noto Sans Tamil", "Latha", sans-serif;
  --tm-font-weight-regular: 400;
  --tm-font-weight-medium: 500;
  --tm-font-weight-semibold: 600;
  --tm-font-feature-numbers: tnum;
  --tm-font-feature-slashed-zero: zero;
  --tm-type-display-size: 32px;
  --tm-type-display-line: 36px;
  --tm-type-display-weight: 600;
  --tm-type-display-large-size: 40px;
  --tm-type-display-large-line: 44px;
  --tm-type-display-large-weight: 600;
  --tm-type-title-size: 20px;
  --tm-type-title-line: 26px;
  --tm-type-title-weight: 600;
  --tm-type-subtitle-size: 17px;
  --tm-type-subtitle-line: 24px;
  --tm-type-subtitle-weight: 600;
  --tm-type-body-simple-size: 15px;
  --tm-type-body-simple-line: 22px;
  --tm-type-body-simple-weight: 400;
  --tm-type-body-pro-size: 13px;
  --tm-type-body-pro-line: 18px;
  --tm-type-body-pro-weight: 400;
  --tm-type-data-pro-size: 12.5px;
  --tm-type-data-pro-line: 16px;
  --tm-type-data-pro-weight: 500;
  --tm-type-label-size: 12px;
  --tm-type-label-line: 16px;
  --tm-type-label-weight: 500;
  --tm-type-axis-size: 11px;
  --tm-type-axis-line: 14px;
  --tm-type-axis-weight: 400;
  --tm-font-ui: var(--tm-font-family-inter);
  --tm-space-0: 0px;
  --tm-space-2: 2px;
  --tm-space-4: 4px;
  --tm-space-8: 8px;
  --tm-space-12: 12px;
  --tm-space-16: 16px;
  --tm-space-20: 20px;
  --tm-space-24: 24px;
  --tm-space-32: 32px;
  --tm-space-40: 40px;
  --tm-space-48: 48px;
  --tm-radius-xs: 4px;
  --tm-radius-sm: 6px;
  --tm-radius-md: 8px;
  --tm-radius-lg: 12px;
  --tm-radius-full: 999px;
  --tm-border-divider: 1px;
  --tm-border-focus: 2px;
  --tm-border-focus-offset: 2px;
  --tm-icon-sm: 16px;
  --tm-icon-md: 20px;
  --tm-z-base: 0;
  --tm-z-sticky: 10;
  --tm-z-dropdown: 100;
  --tm-z-sheet: 200;
  --tm-z-dialog: 300;
  --tm-z-toast: 400;
  --tm-motion-duration-fast: 120ms;
  --tm-motion-duration-base: 200ms;
  --tm-motion-duration-price-tint: 300ms;
  --tm-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --tm-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --tm-breakpoint-phone-min: 360px;
  --tm-breakpoint-phone-max: 430px;
  --tm-breakpoint-tablet: 768px;
  --tm-breakpoint-desktop: 1024px;
  --tm-breakpoint-laptop: 1280px;
  --tm-breakpoint-wide: 1600px;
  --tm-breakpoint-ultra: 2240px;
  --tm-layout-content-simple: 1200px;
  --tm-layout-content-tablet: 720px;
  --tm-layout-gutter-phone: 16px;
  --tm-layout-gutter-tablet: 24px;
  --tm-layout-gutter-desktop: 32px;
  --tm-layout-ticket-docked: 360px;
  --tm-layout-sheet-side: 400px;
  --tm-layout-pro-watchlist-desktop: 240px;
  --tm-layout-pro-watchlist-laptop: 240px;
  --tm-layout-pro-watchlist-wide: 460px;
  --tm-layout-pro-watchlist-ultra: 700px;
  --tm-layout-pro-side-desktop: 300px;
  --tm-layout-pro-book-laptop: 260px;
  --tm-layout-pro-tape: 280px;
  --tm-layout-pro-ticket-laptop: 300px;
  --tm-layout-pro-ticket: 340px;
  --tm-layout-pro-dock-min: 160px;
  --tm-layout-pro-dock-max: 300px;
  --tm-layout-pro-min: 1024px;
  --tm-layout-pro-dock-collapse: 760px;
  --tm-density-font-body: 15px;
  --tm-density-line-body: 22px;
  --tm-density-font-data: 15px;
  --tm-density-line-data: 20px;
  --tm-density-font-label: 13px;
  --tm-density-font-small: 13px;
  --tm-density-row-height: 56px;
  --tm-density-table-row-height: 48px;
  --tm-density-control-height: 48px;
  --tm-density-control-height-xs: 30px;
  --tm-density-control-height-sm: 36px;
  --tm-density-control-height-lg: 56px;
  --tm-density-pad-cell: 16px;
  --tm-density-pad-panel: 20px;
  --tm-density-gap: 16px;
  --tm-density-radius-control: 12px;
  --tm-density-icon: 20px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --tm-color-bg: #F6F7F9;
    --tm-color-panel: #FFFFFF;
    --tm-color-raised: #FFFFFF;
    --tm-color-divider: #E4E7EB;
    --tm-color-divider-strong: #D3D8DF;
    --tm-color-border-control: #8C939D;
    --tm-color-text: #14171C;
    --tm-color-text-secondary: #5F6672;
    --tm-color-text-faint: #8C939D;
    --tm-color-primary: #366EE9;
    --tm-color-primary-hover: #2C62DC;
    --tm-color-primary-pressed: #2556C4;
    --tm-color-on-primary: #FFFFFF;
    --tm-color-primary-text: #1F5FD6;
    --tm-color-primary-tint: rgb(31 95 214 / 0.08);
    --tm-color-primary-tint-strong: rgb(31 95 214 / 0.14);
    --tm-color-focus: #1F5FD6;
    --tm-color-up: #067A4C;
    --tm-color-on-up: #FFFFFF;
    --tm-color-up-tint: rgb(6 122 76 / 0.09);
    --tm-color-down: #D6363F;
    --tm-color-on-down: #FFFFFF;
    --tm-color-down-tint: rgb(214 54 63 / 0.09);
    --tm-color-warning: #A15C00;
    --tm-color-warning-tint: rgb(161 92 0 / 0.1);
    --tm-color-hover: rgb(20 23 28 / 0.04);
    --tm-color-pressed: rgb(20 23 28 / 0.08);
    --tm-color-scrim: rgb(20 23 28 / 0.32);
    --tm-color-skeleton: #E4E7EB;
    --tm-shadow-none: 0px 0px 0px 0px #00000000;
    --tm-shadow-overlay: 0px 12px 32px -12px #141E3247, 0px 1px 2px 0px #141E321A;
  }
}

[data-theme="light"] {
  color-scheme: light;
  --tm-color-bg: #F6F7F9;
  --tm-color-panel: #FFFFFF;
  --tm-color-raised: #FFFFFF;
  --tm-color-divider: #E4E7EB;
  --tm-color-divider-strong: #D3D8DF;
  --tm-color-border-control: #8C939D;
  --tm-color-text: #14171C;
  --tm-color-text-secondary: #5F6672;
  --tm-color-text-faint: #8C939D;
  --tm-color-primary: #366EE9;
  --tm-color-primary-hover: #2C62DC;
  --tm-color-primary-pressed: #2556C4;
  --tm-color-on-primary: #FFFFFF;
  --tm-color-primary-text: #1F5FD6;
  --tm-color-primary-tint: rgb(31 95 214 / 0.08);
  --tm-color-primary-tint-strong: rgb(31 95 214 / 0.14);
  --tm-color-focus: #1F5FD6;
  --tm-color-up: #067A4C;
  --tm-color-on-up: #FFFFFF;
  --tm-color-up-tint: rgb(6 122 76 / 0.09);
  --tm-color-down: #D6363F;
  --tm-color-on-down: #FFFFFF;
  --tm-color-down-tint: rgb(214 54 63 / 0.09);
  --tm-color-warning: #A15C00;
  --tm-color-warning-tint: rgb(161 92 0 / 0.1);
  --tm-color-hover: rgb(20 23 28 / 0.04);
  --tm-color-pressed: rgb(20 23 28 / 0.08);
  --tm-color-scrim: rgb(20 23 28 / 0.32);
  --tm-color-skeleton: #E4E7EB;
  --tm-shadow-none: 0px 0px 0px 0px #00000000;
  --tm-shadow-overlay: 0px 12px 32px -12px #141E3247, 0px 1px 2px 0px #141E321A;
}

[data-theme="dark"] {
  color-scheme: dark;
  --tm-color-bg: #111418;
  --tm-color-panel: #171B21;
  --tm-color-raised: #1E232B;
  --tm-color-divider: #262C35;
  --tm-color-divider-strong: #343B46;
  --tm-color-border-control: #626A77;
  --tm-color-text: #E6E8EB;
  --tm-color-text-secondary: #8C939D;
  --tm-color-text-faint: #6B727D;
  --tm-color-primary: #366EE9;
  --tm-color-primary-hover: #2C62DC;
  --tm-color-primary-pressed: #2556C4;
  --tm-color-on-primary: #FFFFFF;
  --tm-color-primary-text: #6EA0FF;
  --tm-color-primary-tint: rgb(110 160 255 / 0.13);
  --tm-color-primary-tint-strong: rgb(110 160 255 / 0.2);
  --tm-color-focus: #6EA0FF;
  --tm-color-up: #2EBD85;
  --tm-color-on-up: #111418;
  --tm-color-up-tint: rgb(46 189 133 / 0.13);
  --tm-color-down: #F0616D;
  --tm-color-on-down: #111418;
  --tm-color-down-tint: rgb(240 97 109 / 0.13);
  --tm-color-warning: #E5A93B;
  --tm-color-warning-tint: rgb(229 169 59 / 0.13);
  --tm-color-hover: rgb(255 255 255 / 0.04);
  --tm-color-pressed: rgb(255 255 255 / 0.08);
  --tm-color-scrim: rgb(0 0 0 / 0.55);
  --tm-color-skeleton: #262C35;
  --tm-shadow-none: 0px 0px 0px 0px #00000000;
  --tm-shadow-overlay: 0px 18px 40px -22px #000000B3;
}

/* Typeface: one token. */
[data-font="inter"] {
  --tm-font-ui: var(--tm-font-family-inter);
}
[data-font="geist"] {
  --tm-font-ui: var(--tm-font-family-geist);
}

/* Density: comfortable (Simple) is the default; compact is Pro. */
[data-density="comfortable"] {
  --tm-density-font-body: 15px;
  --tm-density-line-body: 22px;
  --tm-density-font-data: 15px;
  --tm-density-line-data: 20px;
  --tm-density-font-label: 13px;
  --tm-density-font-small: 13px;
  --tm-density-row-height: 56px;
  --tm-density-table-row-height: 48px;
  --tm-density-control-height: 48px;
  --tm-density-control-height-xs: 30px;
  --tm-density-control-height-sm: 36px;
  --tm-density-control-height-lg: 56px;
  --tm-density-pad-cell: 16px;
  --tm-density-pad-panel: 20px;
  --tm-density-gap: 16px;
  --tm-density-radius-control: 12px;
  --tm-density-icon: 20px;
}
[data-density="compact"] {
  --tm-density-font-body: 13px;
  --tm-density-line-body: 18px;
  --tm-density-font-data: 12.5px;
  --tm-density-line-data: 16px;
  --tm-density-font-label: 12px;
  --tm-density-font-small: 12px;
  --tm-density-row-height: 30px;
  --tm-density-table-row-height: 30px;
  --tm-density-control-height: 32px;
  --tm-density-control-height-xs: 22px;
  --tm-density-control-height-sm: 26px;
  --tm-density-control-height-lg: 40px;
  --tm-density-pad-cell: 8px;
  --tm-density-pad-panel: 12px;
  --tm-density-gap: 8px;
  --tm-density-radius-control: 6px;
  --tm-density-icon: 16px;
}
/* Pro on a touch screen (iPad landscape): same layout, larger hit targets. */
@media (pointer: coarse) {
  [data-density="compact"] {
    --tm-density-row-height: 36px;
    --tm-density-table-row-height: 36px;
    --tm-density-control-height: 36px;
    --tm-density-control-height-sm: 32px;
    --tm-density-control-height-xs: 28px;
  }
}

/* Component tokens reference roles only. Declared on every scope that can change a role,
   so a nested data-theme or data-density re-resolves them. */
:root, [data-theme], [data-density], [data-font] {
  --tm-button-primary-bg: var(--tm-color-primary);
  --tm-button-primary-bg-hover: var(--tm-color-primary-hover);
  --tm-button-primary-bg-pressed: var(--tm-color-primary-pressed);
  --tm-button-primary-fg: var(--tm-color-on-primary);
  --tm-button-secondary-border: var(--tm-color-border-control);
  --tm-button-secondary-fg: var(--tm-color-text);
  --tm-button-secondary-bg-hover: var(--tm-color-hover);
  --tm-button-ghost-fg: var(--tm-color-text);
  --tm-button-ghost-bg-hover: var(--tm-color-hover);
  --tm-button-ghost-bg-pressed: var(--tm-color-pressed);
  --tm-button-buy-bg: var(--tm-color-up);
  --tm-button-buy-fg: var(--tm-color-on-up);
  --tm-button-sell-bg: var(--tm-color-down);
  --tm-button-sell-fg: var(--tm-color-on-down);
  --tm-button-radius: var(--tm-density-radius-control);
  --tm-input-bg: var(--tm-color-bg);
  --tm-input-border: var(--tm-color-border-control);
  --tm-input-border-focus: var(--tm-color-focus);
  --tm-input-border-error: var(--tm-color-down);
  --tm-input-fg: var(--tm-color-text);
  --tm-input-placeholder: var(--tm-color-text-secondary);
  --tm-input-affix: var(--tm-color-text-secondary);
  --tm-input-radius: var(--tm-density-radius-control);
  --tm-segmented-bg: var(--tm-color-bg);
  --tm-segmented-border: var(--tm-color-divider-strong);
  --tm-segmented-selected-bg: var(--tm-color-primary-tint);
  --tm-segmented-selected-fg: var(--tm-color-primary-text);
  --tm-segmented-buy-bg: var(--tm-color-up-tint);
  --tm-segmented-buy-fg: var(--tm-color-up);
  --tm-segmented-sell-bg: var(--tm-color-down-tint);
  --tm-segmented-sell-fg: var(--tm-color-down);
  --tm-tabs-fg: var(--tm-color-text-secondary);
  --tm-tabs-selected-fg: var(--tm-color-text);
  --tm-tabs-indicator: var(--tm-color-primary-text);
  --tm-panel-bg: var(--tm-color-panel);
  --tm-panel-divider: var(--tm-color-divider);
  --tm-panel-header-fg: var(--tm-color-text);
  --tm-panel-radius: var(--tm-radius-sm);
  --tm-sheet-bg: var(--tm-color-raised);
  --tm-sheet-radius: var(--tm-radius-lg);
  --tm-sheet-shadow: var(--tm-shadow-overlay);
  --tm-sheet-handle: var(--tm-color-divider-strong);
  --tm-menu-bg: var(--tm-color-raised);
  --tm-menu-shadow: var(--tm-shadow-overlay);
  --tm-menu-item-hover: var(--tm-color-hover);
  --tm-table-header-fg: var(--tm-color-text-secondary);
  --tm-table-row-hover: var(--tm-color-hover);
  --tm-table-row-selected: var(--tm-color-primary-tint);
  --tm-table-row-halted-fg: var(--tm-color-text-secondary);
  --tm-table-divider: var(--tm-color-divider);
  --tm-change-up: var(--tm-color-up);
  --tm-change-down: var(--tm-color-down);
  --tm-change-flat: var(--tm-color-text-secondary);
  --tm-price-tint-up: var(--tm-color-up);
  --tm-price-tint-down: var(--tm-color-down);
  --tm-order-book-bid-depth: var(--tm-color-up-tint);
  --tm-order-book-ask-depth: var(--tm-color-down-tint);
  --tm-order-book-price: var(--tm-color-text);
  --tm-order-book-level-hover: var(--tm-color-hover);
  --tm-chart-line-up: var(--tm-color-up);
  --tm-chart-line-down: var(--tm-color-down);
  --tm-chart-baseline: var(--tm-color-divider-strong);
  --tm-chart-grid: var(--tm-color-divider);
  --tm-chart-axis: var(--tm-color-text-secondary);
  --tm-chart-session-shade: var(--tm-color-hover);
  --tm-chart-crosshair: var(--tm-color-text-secondary);
  --tm-banner-info-bg: var(--tm-color-primary-tint);
  --tm-banner-info-icon: var(--tm-color-primary-text);
  --tm-banner-warning-bg: var(--tm-color-warning-tint);
  --tm-banner-warning-icon: var(--tm-color-warning);
  --tm-banner-halt-bg: var(--tm-color-warning-tint);
  --tm-banner-halt-icon: var(--tm-color-warning);
  --tm-banner-error-bg: var(--tm-color-down-tint);
  --tm-banner-error-icon: var(--tm-color-down);
  --tm-status-neutral-bg: var(--tm-color-hover);
  --tm-status-neutral-fg: var(--tm-color-text-secondary);
  --tm-status-uncertain-bg: var(--tm-color-warning-tint);
  --tm-status-uncertain-fg: var(--tm-color-warning);
  --tm-status-error-bg: var(--tm-color-down-tint);
  --tm-status-error-fg: var(--tm-color-down);
  --tm-status-active-fg: var(--tm-color-text);
  --tm-market-state-open: var(--tm-color-up);
  --tm-market-state-pre-open: var(--tm-color-warning);
  --tm-market-state-closed: var(--tm-color-text-secondary);
  --tm-market-state-halted: var(--tm-color-warning);
  --tm-focus-ring: var(--tm-color-focus);
  --tm-skeleton: var(--tm-color-skeleton);
  --tm-link: var(--tm-color-primary-text);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tm-motion-duration-fast: 0ms;
    --tm-motion-duration-base: 0ms;
    --tm-motion-duration-price-tint: 0ms;
  }
}