/*
 * AIS dashboard design tokens.
 *
 * This file is the canonical CSS contract for shared product surfaces. Plotly
 * figures mirror the same color roles in services/chart_theme.py because
 * server-generated chart layouts cannot resolve CSS custom properties.
 */

:root {
    /* Primitive colors */
    --q-color-white: #ffffff;
    --q-color-slate-25: #f8fafc;
    --q-color-slate-50: #f1f5f9;
    --q-color-slate-100: #eef2f7;
    --q-color-slate-200: #e2e8f0;
    --q-color-slate-300: #cbd5e1;
    --q-color-slate-400: #94a3b8;
    --q-color-slate-500: #64748b;
    --q-color-slate-700: #334155;
    --q-color-slate-800: #1e293b;
    --q-color-slate-900: #0f172a;

    --q-color-blue-50: #eff6ff;
    --q-color-blue-100: #dbeafe;
    --q-color-blue-200: #bfdbfe;
    --q-color-blue-300: #93c5fd;
    --q-color-blue-500: #3b82f6;
    --q-color-blue-600: #2563eb;
    --q-color-blue-700: #1d4ed8;

    --q-color-red-50: #fef2f2;
    --q-color-red-100: #fee2e2;
    --q-color-red-200: #fecaca;
    --q-color-red-300: #fca5a5;
    --q-color-red-600: #dc2626;
    --q-color-red-800: #991b1b;

    --q-color-green-50: #ecfdf5;
    --q-color-green-200: #bbf7d0;
    --q-color-green-800: #166534;

    --q-color-amber-50: #fffbeb;
    --q-color-amber-200: #fde68a;
    --q-color-amber-800: #92400e;

    --q-color-sky-50: #e0f2fe;
    --q-color-sky-200: #bae6fd;
    --q-color-sky-600: #0891b2;
    --q-color-sky-800: #075985;
    --q-color-cyan-400: #38bdf8;

    --q-color-teal-600: #0f766e;
    --q-color-teal-700: #115e59;
    --q-color-indigo-600: #4f46e5;
    --q-color-orange-700: #b45309;

    /* Semantic surfaces and text */
    --q-canvas: var(--q-color-white);
    --q-surface: var(--q-color-slate-25);
    --q-surface-muted: var(--q-color-slate-50);
    --q-surface-selected: var(--q-color-blue-50);
    --q-surface-inverse: var(--q-color-slate-900);
    --q-border-subtle: var(--q-color-slate-200);
    --q-border-strong: var(--q-color-slate-300);
    --q-border-menu: #dbe3ed;
    --q-border-grid-column: #e5edf5;
    --q-border-grid-row: var(--q-color-slate-100);
    --q-text-strong: var(--q-color-slate-900);
    --q-text-normal: var(--q-color-slate-700);
    --q-text-muted: var(--q-color-slate-500);
    --q-text-disabled: var(--q-color-slate-400);
    --q-text-inverse: var(--q-color-white);

    /* Interaction */
    --q-primary: var(--q-color-blue-600);
    --q-primary-hover: var(--q-color-blue-700);
    --q-primary-soft: var(--q-color-blue-100);
    --q-focus-ring: rgba(37, 99, 235, 0.10);
    --q-focus-ring-strong: rgba(37, 99, 235, 0.18);
    --q-selection-border: var(--q-color-blue-300);
    --q-nav-active: var(--q-color-cyan-400);
    --q-nav-border: rgba(148, 163, 184, 0.24);
    --q-nav-text: rgba(226, 232, 240, 0.82);
    --q-nav-text-strong: rgba(255, 255, 255, 0.86);
    --q-nav-text-muted: rgba(255, 255, 255, 0.72);
    --q-nav-hover-bg: rgba(255, 255, 255, 0.08);

    /* Status */
    --q-info-fg: var(--q-color-sky-800);
    --q-info-bg: var(--q-color-sky-50);
    --q-info-border: var(--q-color-sky-200);
    --q-success-fg: var(--q-color-green-800);
    --q-success-bg: var(--q-color-green-50);
    --q-success-border: var(--q-color-green-200);
    --q-warning-fg: var(--q-color-amber-800);
    --q-warning-bg: var(--q-color-amber-50);
    --q-warning-border: var(--q-color-amber-200);
    --q-error-fg: var(--q-color-red-800);
    --q-error-bg: var(--q-color-red-50);
    --q-error-border: var(--q-color-red-200);

    /* Numeric grid palettes */
    --q-data-positive-0: var(--q-color-white);
    --q-data-positive-1: var(--q-color-blue-50);
    --q-data-positive-2: var(--q-color-blue-100);
    --q-data-positive-3: var(--q-color-blue-200);
    --q-data-positive-4: var(--q-color-blue-300);
    --q-data-positive-max: var(--q-color-blue-500);
    --q-data-negative-1: var(--q-color-red-50);
    --q-data-negative-2: var(--q-color-red-100);
    --q-data-negative-3: var(--q-color-red-200);
    --q-data-negative-4: var(--q-color-red-300);

    /* Chart and category roles */
    --q-chart-canvas: var(--q-canvas);
    --q-chart-grid: var(--q-border-subtle);
    --q-chart-axis: var(--q-border-strong);
    --q-chart-text: var(--q-text-normal);
    --q-data-fixed-income: var(--q-color-slate-500);
    --q-data-equities: var(--q-color-blue-600);
    --q-data-commodities: var(--q-color-orange-700);
    --q-data-eurobonds: #475569;
    --q-data-multi-asset: var(--q-color-teal-600);
    --q-data-investor-portfolio: var(--q-color-indigo-600);
    --q-data-optimum: var(--q-color-sky-600);
    --q-data-benchmark: #111827;
    --q-data-reference: var(--q-color-slate-400);
    --q-data-negative: #f87171;

    /* Typography */
    --q-font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    --q-font-size-2xs: 10px;
    --q-font-size-xs: 11px;
    --q-font-size-sm: 12px;
    --q-font-size-md: 13px;
    --q-font-size-lg: 15px;
    --q-font-size-xl: 16px;
    --q-font-size-2xl: 18px;
    --q-font-size-3xl: 20px;
    --q-font-size-4xl: 22px;
    --q-font-weight-regular: 400;
    --q-font-weight-medium: 500;
    --q-font-weight-semibold: 600;
    --q-font-weight-bold: 700;
    --q-line-height-tight: 1.2;
    --q-line-height-snug: 1.35;
    --q-line-height-normal: 1.5;

    /* Spacing */
    --q-space-1: 4px;
    --q-space-2: 6px;
    --q-space-3: 8px;
    --q-space-4: 10px;
    --q-space-5: 12px;
    --q-space-6: 14px;
    --q-space-7: 16px;
    --q-space-8: 18px;
    --q-space-9: 20px;
    --q-space-10: 24px;
    --q-space-11: 28px;
    --q-space-12: 32px;
    --q-space-13: 40px;
    --q-section-gap: var(--q-space-10);

    /* Shape and borders */
    --q-radius-xs: 2px;
    --q-radius-sm: 4px;
    --q-radius-menu-item: 5px;
    --q-radius-md: 6px;
    --q-radius-lg: 8px;
    --q-radius-full: 999px;
    --q-border-width: 1px;

    /* Elevation */
    --q-shadow-focus: 0 0 0 2px var(--q-focus-ring);
    --q-shadow-focus-soft: 0 0 0 2px rgba(37, 99, 235, 0.08);
    --q-shadow-menu: 0 12px 28px rgba(15, 23, 42, 0.14);
    --q-shadow-menu-strong: 0 14px 30px rgba(15, 23, 42, 0.16);
    --q-shadow-navbar: 0 1px 6px rgba(15, 23, 42, 0.14);
    --q-shadow-subtle: 0 10px 30px rgba(15, 23, 42, 0.06);

    /* Stable component dimensions */
    --q-control-height: 36px;
    --q-control-height-compact: 30px;
    --q-icon-button-size: 36px;
    --q-navbar-height: 54px;
    --q-navbar-logo-height: 29px;
    --q-public-navbar-height: 72px;
    --q-public-navbar-logo-height: 30px;
    --q-account-button-size: 32px;
    --q-chip-height: 28px;
    --q-segmented-height: 34px;
    --q-grid-row-height: 28px;
    --q-grid-row-height-dense: 24px;
    --q-grid-header-height: 36px;
    --q-grid-header-height-dense: 34px;
    --q-chart-height-sm: 320px;
    --q-chart-height-md: 390px;
    --q-chart-height-lg: 500px;

    /* Product shell */
    --q-shell-max: 1280px;
    --q-shell-max-analytics: 1440px;
    --q-shell-max-wide: 1600px;
    --q-shell-gutter: 32px;
    --q-shell-gutter-compact: 20px;

    /* Motion */
    --q-duration-fast: 120ms;
    --q-duration-normal: 180ms;
    --q-ease-standard: ease;

    /* Layering */
    --q-z-dropdown: 1200;
    --q-z-sticky: 1300;
    --q-z-overlay: 1400;
    --q-z-modal: 1500;

    /* Breakpoint references. CSS media queries must still use literal values. */
    --q-breakpoint-compact: 760px;
    --q-breakpoint-tablet: 900px;
    --q-breakpoint-desktop: 1120px;
    --q-breakpoint-wide: 1400px;
}