/* ─────────────────────────────────────────────────────────────────────────────
   Fleetman Modern — design tokens.

   Ported verbatim from the Claude Design handoff bundle
   ("Rendering across pages", _ds/pm-applications-loco-gamehub-design-system/
   tokens/*.css) with the Fleetman brand override the mock applies on its root
   container: the neutral cyan→blue→purple gradient is replaced by Fleetman's
   teal→blue, and every brand-derived glow and focus ring follows it.

   Everything is scoped to [data-fm-theme="modern"] so the classic monochrome
   theme (css/theme.css) is completely unaffected — the two themes never share
   a custom property.

   Components must reference ONLY the semantic aliases (--surface-*, --text-*,
   --border-*, --brand-*, --tint-*), never the raw ramps below them.
   ──────────────────────────────────────────────────────────────────────────── */

[data-fm-theme="modern"] {
    /* ══ Raw palette — never referenced directly by components ══ */

    /* Fleetman brand (teal → blue) */
    --fm-teal: #00D4AA;
    --fm-teal-600: #00B694;
    --fm-teal-300: #5EEBD1;
    --fm-cyan: #1FC3C7;

    /* Signal palette (carried over from the design system) */
    --signal-blue: #3F7BFF;
    --signal-blue-600: #2F6BF0;
    --signal-blue-400: #5B92FF;
    --beacon-cyan: #4EC8E8;
    --pulse-purple: #6A3FE0;
    --pulse-green: #1FB477;
    --signal-amber: #F5A524;
    --signal-red: #E5484D;

    /* Navy ramp — the sidebar and every dark surface */
    --navy-950: #050811;
    --navy-900: #080B14;
    --navy-850: #0C1020;
    --navy-800: #101626;
    --navy-750: #171E32;

    /* Paper ramp — the content area */
    --paper-0: #FFFFFF;
    --paper-50: #F4F6FB;
    --paper-100: #EDF0FA;
    --paper-150: #E3E8F5;
    --paper-line: #DDE3F0;
    --paper-line-strong: #C2CDE6;
    --ink-1: #0B1024;
    --ink-2: #5B6484;
    --ink-3: #8F9AB8;

    /* Alpha utilities */
    --white-09: rgba(255, 255, 255, 0.09);
    --white-16: rgba(255, 255, 255, 0.16);

    /* ══ Semantic aliases — use these ══ */

    /* Brand */
    --gradient-brand: linear-gradient(135deg, #00D4AA 0%, #1FC3C7 50%, #3F7BFF 100%);
    --brand-primary: #00B694;
    --brand-secondary: var(--pulse-purple);
    --brand-accent: var(--beacon-cyan);
    --brand-success: var(--pulse-green);
    --brand-warning: var(--signal-amber);
    --brand-danger: var(--signal-red);

    /* Surfaces — light "studio" mode for the content area */
    --surface-base: var(--paper-50);
    --surface-raised: var(--paper-0);
    --surface-card: var(--paper-0);
    --surface-sunken: var(--paper-150);
    --surface-overlay: rgba(11, 16, 36, 0.42);
    --surface-glass: rgba(255, 255, 255, 0.86);

    /* Text */
    --text-primary: var(--ink-1);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --text-inverse: #FFFFFF;

    /* Borders */
    --border-subtle: var(--paper-line);
    --border-strong: var(--paper-line-strong);
    --border-focus: var(--brand-primary);

    /* Interactive */
    --interactive-default: var(--brand-primary);
    --interactive-hover: #00C9A3;
    --interactive-pressed: #009B7E;
    --interactive-disabled: rgba(11, 16, 36, 0.16);
    --on-interactive: #FFFFFF;

    /* Status tints — always paired with an icon and a label, never colour alone */
    --tint-success-bg: rgba(31, 180, 119, 0.14);
    --tint-success-fg: #0F7A50;
    --tint-success-bd: rgba(31, 180, 119, 0.26);
    --tint-warning-bg: rgba(245, 165, 36, 0.16);
    --tint-warning-fg: #8A5300;
    --tint-warning-bd: rgba(245, 165, 36, 0.28);
    --tint-danger-bg: rgba(229, 72, 77, 0.13);
    --tint-danger-fg: #B3252A;
    --tint-danger-bd: rgba(229, 72, 77, 0.28);
    --tint-neutral-bg: rgba(11, 16, 36, 0.06);
    --tint-neutral-fg: var(--ink-2);
    --tint-neutral-bd: rgba(11, 16, 36, 0.12);
    --tint-info-bg: rgba(63, 123, 255, 0.12);
    --tint-info-fg: #1F4FBF;
    --tint-info-bd: rgba(63, 123, 255, 0.26);

    /* ── Typography ── */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --text-display-l: 2.75rem;
    --text-display-m: 2.125rem;
    --text-heading-l: 1.75rem;
    --text-heading-m: 1.4375rem;
    --text-heading-s: 1.0625rem;
    --text-body-l: 1rem;
    --text-body-m: 0.875rem;
    --text-body-s: 0.78rem;
    --text-caption: 0.6875rem;

    --leading-tight: 1;
    --leading-snug: 1.2;
    --leading-normal: 1.35;
    --leading-relaxed: 1.55;

    --tracking-tight: -0.02em;
    --tracking-wide: 0.04em;
    --tracking-caps: 0.08em;

    /* ── Spacing (4-based) ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --touch-target: 44px;

    /* ── Radii — almost nothing is square ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-control: 14px;
    --radius-brand: 14px;
    --radius-lg: 16px;
    --radius-card: 20px;
    --radius-panel: 22px;
    --radius-pill: 999px;

    /* ── Elevation — soft neutral depth plus a brand glow for energy ── */
    --shadow-sm: 0 1px 2px rgba(11, 16, 36, 0.05), 0 2px 8px rgba(11, 16, 36, 0.04);
    --shadow-md: 0 4px 16px rgba(11, 16, 36, 0.09), 0 1px 4px rgba(11, 16, 36, 0.05);
    --shadow-lg: 0 16px 48px rgba(11, 16, 36, 0.13);
    --glow-cta: 0 12px 28px rgba(0, 180, 148, 0.32);
    --glow-brand: 0 8px 22px rgba(0, 180, 148, 0.30);
    --ring-focus: 0 0 0 3px rgba(0, 180, 148, 0.35);

    /* ── Motion ── */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    --press-scale: 0.96;

    /* ── Shell geometry ──
       The sidebar is a drawer below --shell-breakpoint and a fixed rail above
       it. 1400px matches the breakpoint the responsive suite already pins. */
    --shell-sidebar-width: 260px;
    --shell-sidebar-drawer-width: 280px;
    --shell-header-height: 68px;
}

@media (prefers-reduced-motion: reduce) {
    [data-fm-theme="modern"] {
        --duration-fast: 1ms;
        --duration-normal: 1ms;
        --press-scale: 1;
    }
}