/*
 * Design tokens. Every colour, size, radius, shadow and font used by the app is defined here.
 * Components only reference these variables through classes in app.css.
 *
 * Breakpoints cannot use CSS variables inside @media; the values below are mirrored as
 * literals in app.css and must be kept in sync:
 *   mobile   : max-width 767px
 *   tablet   : max-width 1023px
 */
:root {
    /* Palette: deep space background, brushed-metal surfaces, cyan energy accent */
    --ob-color-bg: #05080f;
    --ob-color-bg-elevated: #0b111c;
    --ob-color-surface: #111a29;
    --ob-color-surface-alt: #172336;
    --ob-color-surface-hover: #1c2a40;
    --ob-color-border: #24344c;
    --ob-color-border-strong: #3b5273;
    --ob-color-text: #dbe4f2;
    --ob-color-text-muted: #8797b0;
    --ob-color-text-inverse: #05080f;

    --ob-color-accent: #38c8ff;
    --ob-color-accent-strong: #0ea5e9;
    --ob-color-accent-soft: rgba(56, 200, 255, 0.12);
    --ob-color-accent-glow: rgba(56, 200, 255, 0.35);

    --ob-color-metal: #c2ccdb;
    --ob-color-crystal: #62c9ff;
    --ob-color-deuterium: #6ee7a8;

    --ob-color-positive: #4ade80;
    --ob-color-positive-soft: rgba(74, 222, 128, 0.12);
    --ob-color-negative: #fb7185;
    --ob-color-negative-soft: rgba(251, 113, 133, 0.12);
    --ob-color-neutral: #94a3b8;
    --ob-color-neutral-soft: rgba(148, 163, 184, 0.12);
    --ob-color-danger: #ef4444;
    --ob-color-warning: #fbbf24;

    --ob-color-fleet: #38c8ff;
    --ob-color-trade: #c084fc;

    /* Metallic gradients */
    --ob-gradient-surface: linear-gradient(160deg, #16223a 0%, #0f1828 55%, #0b1220 100%);
    --ob-gradient-header: linear-gradient(90deg, #0b111c 0%, #131f33 60%, #0b111c 100%);
    --ob-gradient-accent: linear-gradient(135deg, #38c8ff 0%, #0ea5e9 100%);
    --ob-gradient-bg: radial-gradient(ellipse at top left, #101a2c 0%, #05080f 60%);
    --ob-gradient-brushed: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 4px);

    /* Typography */
    --ob-font-body: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
    --ob-font-display: 'Orbitron', 'Exo 2', 'Segoe UI', sans-serif;
    --ob-font-mono: 'Consolas', 'SF Mono', monospace;
    --ob-font-size-xs: 0.75rem;
    --ob-font-size-sm: 0.875rem;
    --ob-font-size-md: 1rem;
    --ob-font-size-lg: 1.25rem;
    --ob-font-size-xl: 1.6rem;
    --ob-font-size-xxl: 2.2rem;
    --ob-font-weight-regular: 400;
    --ob-font-weight-semibold: 600;
    --ob-font-weight-bold: 700;
    --ob-letter-spacing-wide: 0.08em;
    --ob-line-height: 1.5;

    /* Spacing */
    --ob-space-1: 0.25rem;
    --ob-space-2: 0.5rem;
    --ob-space-3: 0.75rem;
    --ob-space-4: 1rem;
    --ob-space-5: 1.5rem;
    --ob-space-6: 2rem;
    --ob-space-7: 3rem;

    /* Shape */
    --ob-radius-sm: 4px;
    --ob-radius-md: 8px;
    --ob-radius-lg: 14px;
    --ob-border-width: 1px;
    --ob-border-width-strong: 2px;

    /* Elevation */
    --ob-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --ob-shadow-glow: 0 0 0 1px var(--ob-color-accent-glow), 0 0 18px var(--ob-color-accent-glow);
    --ob-shadow-header: 0 2px 12px rgba(0, 0, 0, 0.5);

    /* Layout */
    --ob-sidebar-width: 260px;
    --ob-header-height: 60px;
    --ob-page-max-width: 1280px;
    --ob-summary-width: 320px;
    --ob-login-width: 420px;
    --ob-ship-image-size: 96px;
    --ob-res-icon-size: 18px;
    --ob-res-icon-size-small: 12px;
    --ob-res-icon-size-header: 26px;
    --ob-ship-card-min-width: 150px;
    --ob-balance-card-min-width: 400px;
    --ob-settings-card-min-width: 280px;
    --ob-input-height: 42px;

    /* Motion */
    --ob-transition-fast: 120ms ease;
    --ob-transition-normal: 200ms ease;

    /* Radzen theme bridge: the Radzen components read these variables */
    --rz-primary: var(--ob-color-accent);
    --rz-primary-light: var(--ob-color-accent);
    --rz-primary-lighter: var(--ob-color-accent-soft);
    --rz-primary-dark: var(--ob-color-accent-strong);
    --rz-primary-darker: var(--ob-color-accent-strong);
    --rz-on-primary: var(--ob-color-text-inverse);
    --rz-secondary: var(--ob-color-trade);
    --rz-danger: var(--ob-color-danger);
    --rz-danger-light: var(--ob-color-negative);
    --rz-success: var(--ob-color-positive);
    --rz-warning: var(--ob-color-warning);
    --rz-info: var(--ob-color-accent);
    --rz-base-background-color: var(--ob-color-bg);
    --rz-body-background-color: var(--ob-color-bg);
    --rz-panel-background-color: var(--ob-color-surface);
    --rz-card-background-color: var(--ob-color-surface);
    --rz-header-background-color: var(--ob-color-bg-elevated);
    --rz-sidebar-background-color: var(--ob-color-bg-elevated);
    --rz-input-background-color: var(--ob-color-bg-elevated);
    --rz-input-border: var(--ob-border-width) solid var(--ob-color-border);
    --rz-input-focus-border: var(--ob-border-width) solid var(--ob-color-accent);
    --rz-text-color: var(--ob-color-text);
    --rz-text-title-color: var(--ob-color-text);
    --rz-text-secondary-color: var(--ob-color-text-muted);
    --rz-text-disabled-color: var(--ob-color-text-muted);
    --rz-border-radius: var(--ob-radius-md);
    --rz-body-font-family: var(--ob-font-body);
    --rz-body-font-size: var(--ob-font-size-md);
    --rz-panel-menu-item-color: var(--ob-color-text-muted);
    --rz-panel-menu-item-hover-color: var(--ob-color-text);
    --rz-panel-menu-item-hover-background-color: var(--ob-color-surface-alt);
    --rz-panel-menu-item-active-color: var(--ob-color-accent);
    --rz-panel-menu-item-active-background-color: var(--ob-color-accent-soft);
    --rz-sidebar-width: var(--ob-sidebar-width);
    --rz-header-height: var(--ob-header-height);
}