/*
 * AIONEX Trade design system
 *
 * This file is the single source of truth for shared visual tokens and
 * interaction-state primitives. Page styles may define layout-specific rules,
 * but must consume these tokens instead of introducing a second theme.
 */

:root {
    color-scheme: dark;

    /* Primitive palette */
    --ds-ink-950: #05080d;
    --ds-ink-900: #09111d;
    --ds-ink-850: #0d1726;
    --ds-ink-800: #111d2e;
    --ds-slate-500: #64748b;
    --ds-slate-400: #94a3b8;
    --ds-slate-300: #cbd5e1;
    --ds-slate-100: #f1f5f9;
    --ds-white: #ffffff;
    --ds-cyan-500: #06b6d4;
    --ds-cyan-400: #22d3ee;
    --ds-cyan-300: #67e8f9;
    --ds-blue-500: #3b82f6;
    --ds-purple-500: #a855f7;
    --ds-green-500: #10b981;
    --ds-green-400: #34d399;
    --ds-amber-500: #f59e0b;
    --ds-amber-400: #fbbf24;
    --ds-red-500: #ef4444;
    --ds-red-400: #fb7185;
    --ds-sky-400: #38bdf8;

    /* Semantic colour and surface hierarchy */
    --surface-canvas: var(--ds-ink-950);
    --surface-primary: rgb(13 23 38 / 88%);
    --surface-secondary: rgb(9 17 29 / 82%);
    --surface-tertiary: rgb(17 29 46 / 72%);
    --surface-inset: rgb(3 8 15 / 72%);
    --surface-overlay: rgb(0 0 0 / 82%);
    --surface-scrim: rgb(0 0 0 / 68%);
    --surface-disabled: rgb(148 163 184 / 9%);
    --text-strong: var(--ds-white);
    --text-default: #e2e8f0;
    --text-muted: var(--ds-slate-400);
    --text-subtle: #718096;
    --text-disabled: #64748b;
    --border-subtle: rgb(255 255 255 / 8%);
    --border-default: rgb(255 255 255 / 14%);
    --border-strong: rgb(255 255 255 / 22%);
    --interactive-default: var(--ds-cyan-300);
    --interactive-hover: var(--ds-cyan-400);
    --interactive-pressed: var(--ds-cyan-500);
    --interactive-surface: rgb(34 211 238 / 10%);
    --interactive-surface-hover: rgb(34 211 238 / 16%);
    --focus-ring-color: var(--ds-cyan-300);
    --focus-ring-shadow: 0 0 0 3px rgb(103 232 249 / 28%);

    /* Status: text, surface and border are separate for contrast-safe use. */
    --status-success: var(--ds-green-400);
    --status-success-text: #6ee7b7;
    --status-success-surface: rgb(16 185 129 / 12%);
    --status-success-border: rgb(52 211 153 / 38%);
    --status-warning: var(--ds-amber-400);
    --status-warning-text: #fde68a;
    --status-warning-surface: rgb(245 158 11 / 12%);
    --status-warning-border: rgb(251 191 36 / 42%);
    --status-error: var(--ds-red-400);
    --status-error-text: #fecdd3;
    --status-error-surface: rgb(239 68 68 / 12%);
    --status-error-border: rgb(251 113 133 / 42%);
    --status-info: var(--ds-sky-400);
    --status-info-text: #bae6fd;
    --status-info-surface: rgb(56 189 248 / 12%);
    --status-info-border: rgb(56 189 248 / 40%);

    /* Data visualisation. Never encode meaning by colour alone. */
    --chart-positive: var(--ds-green-400);
    --chart-negative: var(--ds-red-400);
    --chart-neutral: var(--ds-amber-400);
    --chart-information: var(--ds-sky-400);
    --chart-series-1: #22d3ee;
    --chart-series-2: #a78bfa;
    --chart-series-3: #fbbf24;
    --chart-series-4: #34d399;
    --chart-series-5: #fb7185;
    --chart-grid: rgb(148 163 184 / 18%);
    --chart-axis: var(--text-muted);
    --chart-line-primary-style: solid;
    --chart-line-comparison-style: dashed;

    /* Typography */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
    --font-family-monospace: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: clamp(1.75rem, 3vw, 2.25rem);
    --line-height-tight: 1.25;
    --line-height-heading: 1.35;
    --line-height-body: 1.6;
    --letter-spacing-label: 0.04em;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing, grid and containers */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --grid-gutter: clamp(1rem, 2.5vw, 2rem);
    --container-reading: 42rem;
    --container-content: 75rem;
    --container-wide: 90rem;
    --breakpoint-mobile: 360px;
    --breakpoint-mobile-wide: 412px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;

    /* Shape and elevation */
    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;
    --border-width: 1px;
    --elevation-1: 0 1px 2px rgb(0 0 0 / 40%);
    --elevation-2: 0 4px 12px rgb(0 0 0 / 35%), 0 1px 3px rgb(0 0 0 / 40%);
    --elevation-3: 0 12px 32px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 25%);
    --elevation-4: 0 24px 60px rgb(0 0 0 / 50%), 0 8px 20px rgb(0 0 0 / 30%);
    --shadow-raised: 0 1rem 2.5rem rgb(0 0 0 / 28%);
    --shadow-overlay: 0 1.75rem 5.625rem rgb(0 0 0 / 46%);
    --shadow-card: 0 0.625rem 1.875rem rgb(0 0 0 / 38%), inset 0 1px 0 rgb(255 255 255 / 8%);
    --shadow-card-hover: 0 1.25rem 2.5rem rgb(0 0 0 / 48%), 0 0 1.25rem rgb(34 211 238 / 12%);

    /* Controls and iconography */
    --control-height-sm: 2.25rem;
    --control-height: 2.75rem;
    --control-height-lg: 3rem;
    --touch-target: 2.75rem;
    --icon-size-sm: 1rem;
    --icon-size-md: 1.25rem;
    --icon-size-lg: 1.5rem;
    --input-surface: rgb(3 8 15 / 72%);
    --input-border: var(--border-default);
    --input-placeholder: var(--text-subtle);

    /* Motion and layers */
    --duration-instant: 1ms;
    --duration-fast: 120ms;
    --duration-normal: 220ms;
    --duration-slow: 400ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Canonical order: content < sticky < dropdown < sidebar < dialog < lightbox < toast. */
    --layer-base: 0;
    --layer-content: 0;
    --layer-raised: 10;
    --layer-sticky: 20;
    --layer-dropdown: 40;
    --layer-sidebar: 100;
    --layer-sidebar-scrim: 90;
    --layer-dialog: 1000;
    --layer-lightbox: 1100;
    --layer-tour-overlay: 1110;
    --layer-tour-target: 1120;
    --layer-tour-tooltip: 1130;
    --layer-toast: 1200;

    /* Compatibility aliases consumed by the existing application. */
    --bg-color: var(--surface-canvas);
    --primary-card-bg: var(--surface-primary);
    --secondary-card-bg: var(--surface-secondary);
    --border-color: var(--border-subtle);
    --border-color-light: var(--border-default);
    --text-primary: var(--text-strong);
    --text-secondary: var(--text-muted);
    --accent-color: var(--interactive-default);
    --accent-hover: var(--ds-blue-500);
    --accent-purple: var(--ds-purple-500);
    --accent-subtle-bg: var(--interactive-surface);
    --heading-accent: var(--interactive-default);
    --buy-color: var(--status-success);
    --sell-color: var(--status-error);
    --hold-color: var(--status-warning);
    --link-color: var(--interactive-default);
    --key-drivers-bg: var(--surface-tertiary);
    --glance-bg: var(--surface-tertiary);
    --confidence-breakdown-bg: var(--surface-tertiary);
    --signal-card-bg: var(--surface-primary);
    --tooltip-bg: var(--surface-inset);
    --input-bg: var(--input-surface);
    --glance-border: var(--border-default);
    --neon-blue-glow: 0 0 1.25rem rgb(34 211 238 / 22%);
    --card-shadow: var(--shadow-card);
    --card-hover-shadow: var(--shadow-card-hover);
    --input-focus-shadow: var(--focus-ring-shadow);
    --base-font-size: 16px;
    --line-height-base: var(--line-height-body);
    --spacing-unit: 8px;
    --border-radius-small: var(--radius-sm);
    --border-radius-medium: var(--radius-md);
    --border-radius-large: var(--radius-lg);
    --surface: var(--surface-canvas);
    --surface-elevated: var(--surface-primary);
    --surface-subtle: var(--surface-secondary);
    --border-semantic: var(--border-default);
    --focus-ring: var(--focus-ring-color);
    --action-primary: #087f8c;
    --action-primary-hover: #0e7490;
    --interactive-text: var(--interactive-default);
    --action-success: #047857;
    --action-danger: #b91c1c;
    --overlay-bg: var(--surface-overlay);
    --transition-base: var(--duration-slow) var(--ease-standard);
    --transition-fast: var(--duration-normal) var(--ease-standard);
    --glance-icon-trend-up: var(--chart-positive);
    --glance-icon-trend-down: var(--chart-negative);
    --glance-icon-trend-chop: var(--chart-neutral);
    --glance-icon-senti-fear: var(--chart-negative);
    --glance-icon-senti-greed: var(--chart-positive);
    --glance-icon-senti-neutral: var(--text-muted);
    --glance-icon-whale-buy: var(--chart-positive);
    --glance-icon-whale-sell: var(--chart-negative);
    --glance-icon-whale-neutral: var(--text-muted);
    --glance-icon-risk-high: var(--chart-negative);
    --glance-icon-risk-med: var(--chart-neutral);
    --glance-icon-risk-low: var(--chart-information);
    --glance-icon-risk-none: var(--chart-positive);
    --confidence-positive-adjust: var(--chart-positive);
    --confidence-negative-adjust: var(--chart-negative);
    --confidence-neutral-adjust: var(--text-muted);
}

[data-theme="light"] {
    color-scheme: light;
    --surface-canvas: #f8fafc;
    --surface-primary: rgb(255 255 255 / 92%);
    --surface-secondary: rgb(241 245 249 / 90%);
    --surface-tertiary: rgb(255 255 255 / 76%);
    --surface-inset: rgb(255 255 255 / 94%);
    --surface-overlay: rgb(15 23 42 / 72%);
    --surface-scrim: rgb(15 23 42 / 58%);
    --surface-disabled: rgb(15 23 42 / 6%);
    --text-strong: #0f172a;
    --text-default: #1e293b;
    --text-muted: #475569;
    --text-subtle: #64748b;
    --text-disabled: #94a3b8;
    --border-subtle: rgb(15 23 42 / 10%);
    --border-default: rgb(15 23 42 / 18%);
    --border-strong: rgb(15 23 42 / 30%);
    --interactive-default: #0369a1;
    --interactive-hover: #075985;
    --interactive-pressed: #0c4a6e;
    --interactive-surface: rgb(2 132 199 / 9%);
    --interactive-surface-hover: rgb(2 132 199 / 14%);
    --focus-ring-color: #075985;
    --focus-ring-shadow: 0 0 0 3px rgb(3 105 161 / 22%);
    --status-success-text: #047857;
    --status-warning-text: #92400e;
    --status-error-text: #9f1239;
    --status-info-text: #075985;
    --chart-grid: rgb(15 23 42 / 14%);
    --chart-axis: #475569;
    --input-surface: rgb(255 255 255 / 94%);
    --shadow-raised: 0 1rem 2.5rem rgb(15 23 42 / 12%);
    --shadow-overlay: 0 1.75rem 5.625rem rgb(15 23 42 / 20%);
    --shadow-card: 0 0.625rem 1.875rem rgb(15 23 42 / 8%), inset 0 1px 0 rgb(255 255 255 / 70%);
    --shadow-card-hover: 0 1.25rem 2.5rem rgb(15 23 42 / 13%), 0 0 1.25rem rgb(3 105 161 / 9%);
    --elevation-1: 0 1px 2px rgb(15 23 42 / 6%);
    --elevation-2: 0 4px 12px rgb(15 23 42 / 6%), 0 1px 3px rgb(15 23 42 / 4%);
    --elevation-3: 0 12px 32px rgb(15 23 42 / 8%), 0 4px 12px rgb(15 23 42 / 4%);
    --elevation-4: 0 24px 60px rgb(15 23 42 / 12%), 0 8px 20px rgb(15 23 42 / 6%);
    --heading-accent: #075985;
    --action-primary: #0369a1;
    --action-primary-hover: #075985;
    --action-success: #047857;
    --action-danger: #b91c1c;
}

html {
    accent-color: var(--interactive-default);
}

body {
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--interactive-surface-hover);
    color: var(--text-strong);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 3px;
    box-shadow: var(--focus-ring-shadow);
}

:where(button, input, select, textarea):disabled,
:where([aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: 0.62;
}

:where(input, select, textarea)::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

:where(p, li, dd, td, th, label, button, a) {
    overflow-wrap: anywhere;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.state-surface {
    padding: var(--space-5);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    color: var(--text-default);
}

.state-surface[data-state="success"] {
    border-color: var(--status-success-border);
    background: var(--status-success-surface);
}

.state-surface[data-state="warning"] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-surface);
}

.state-surface[data-state="error"] {
    border-color: var(--status-error-border);
    background: var(--status-error-surface);
}

.state-surface[data-state="info"] {
    border-color: var(--status-info-border);
    background: var(--status-info-surface);
}

.skeleton {
    color: transparent !important;
    background: linear-gradient(90deg, var(--surface-secondary), var(--surface-tertiary), var(--surface-secondary));
    background-size: 200% 100%;
    animation: ds-skeleton 1.4s var(--ease-standard) infinite;
}

@keyframes ds-skeleton {
    to { background-position-x: -200%; }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        /* Keep state feedback perceptible without long travel or looping motion. */
        --duration-fast: 80ms;
        --duration-normal: 100ms;
        --duration-slow: 120ms;
    }

    html:focus-within {
        scroll-behavior: auto;
    }

    .skeleton {
        animation: none;
        background: var(--surface-tertiary);
    }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 2px solid CanvasText;
        box-shadow: none;
    }

    .state-surface {
        border-color: CanvasText;
    }
}