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

   Light is the base value set on [data-fm-theme="orange"]; dark overrides the
   same custom properties under the extra [data-fm-color-mode="dark"] attribute,
   so every component below reads ONE set of names in ONE file and gets both
   palettes for free — there is no separate dark stylesheet and no markup fork.

   Scoped entirely to [data-fm-theme="orange"]; the classic and modern themes
   share none of these properties and are completely unaffected.

   Components must reference ONLY the semantic aliases (--surface-*, --text-*,
   --border-*, --brand-*, --tint-*), never the raw --orange-* ramp directly.
   ──────────────────────────────────────────────────────────────────────────── */

[data-fm-theme="orange"] {
    /* ══ Raw brand ramp — never referenced directly by components ══ */
    --orange-50:  #fff7f2;
    --orange-100: #ffe8d8;
    --orange-200: #ffd0b3;
    --orange-300: #ffb37c;
    --orange-400: #ff7a2f;
    --orange-500: #ff5a00;
    --orange-600: #e94e00;
    --orange-700: #c94300;

    /* ══ Semantic — light values (the theme's default rendering) ══ */
    --surface-canvas: #f7f7f9;
    --surface-base: #ffffff;
    --surface-raised: #ffffff;
    --surface-subtle: #f3f4f6;
    --surface-hover: #faf1eb;
    --surface-active: #fff0e6;
    --surface-overlay: rgba(21, 23, 28, 0.42);

    --text-primary: #15171c;
    --text-secondary: #606775;
    --text-muted: #8b93a1;
    --text-inverse: #ffffff;

    --border-subtle: #e7e8eb;
    --border-strong: #d6d9df;
    --border-focus: var(--brand-primary);

    --brand-primary: var(--orange-500);
    --brand-hover: var(--orange-600);
    --brand-pressed: var(--orange-700);
    --on-brand: #ffffff;
    --focus-ring: rgba(255, 90, 0, 0.28);

    --tint-brand-bg: var(--orange-100);
    --tint-brand-fg: var(--orange-700);

    /* Status tints — always paired with an icon and a label; never colour alone. */
    --tint-success-bg: rgba(22, 163, 74, 0.12);
    --tint-success-fg: #15803d;
    --tint-success-bd: rgba(22, 163, 74, 0.28);
    --tint-warning-bg: rgba(217, 119, 6, 0.14);
    --tint-warning-fg: #92400e;
    --tint-warning-bd: rgba(217, 119, 6, 0.28);
    --tint-danger-bg: rgba(220, 38, 38, 0.10);
    --tint-danger-fg: #b91c1c;
    --tint-danger-bd: rgba(220, 38, 38, 0.28);
    --tint-info-bg: rgba(37, 99, 235, 0.10);
    --tint-info-fg: #1d4ed8;
    --tint-info-bd: rgba(37, 99, 235, 0.26);
    --tint-neutral-bg: rgba(21, 23, 28, 0.06);
    --tint-neutral-fg: var(--text-secondary);
    --tint-neutral-bd: rgba(21, 23, 28, 0.12);

    --gradient-brand: linear-gradient(135deg, var(--orange-400) 0%, var(--orange-500) 60%, var(--orange-600) 100%);
    --shadow-sm: 0 1px 2px rgba(15, 17, 23, 0.05), 0 2px 8px rgba(15, 17, 23, 0.04);
    --shadow-md: 0 4px 16px rgba(15, 17, 23, 0.08), 0 1px 4px rgba(15, 17, 23, 0.05);
    --shadow-lg: 0 16px 48px rgba(15, 17, 23, 0.14);
    --glow-cta: 0 10px 24px rgba(255, 90, 0, 0.24);
    --glow-brand: 0 8px 20px rgba(255, 90, 0, 0.20);
    --ring-focus: 0 0 0 3px var(--focus-ring);

    /* ── Typography — unchanged from Fleetman Modern ── */
    --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 (4px base) ── */
    --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 ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-control: 14px;
    --radius-brand: 14px;
    --radius-lg: 16px;
    --radius-card: 18px;
    --radius-panel: 18px;
    --radius-pill: 999px;

    /* ── 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);
    --press-scale: 0.97;

    /* ── Shell geometry — same breakpoint the responsive suite already pins ── */
    --shell-sidebar-width: 260px;
    --shell-sidebar-drawer-width: 280px;
    --shell-header-height: 72px;
}

/* ── Dark mode — same names, new values. No component below needs to know. ── */
[data-fm-theme="orange"][data-fm-color-mode="dark"] {
    --surface-canvas: #0f1115;
    --surface-base: #13161b;
    --surface-raised: #191d23;
    --surface-subtle: #20252d;
    --surface-hover: #252b34;
    --surface-active: #302016;
    --surface-overlay: rgba(0, 0, 0, 0.55);

    --text-primary: #f7f8fa;
    --text-secondary: #bcc3cd;
    --text-muted: #929baa;
    --text-inverse: #15171c;

    --border-subtle: #292f38;
    --border-strong: #39414c;

    --brand-primary: #ff6a1a;
    --brand-hover: #ff7a32;
    --brand-pressed: #e95a12;
    --focus-ring: rgba(255, 106, 26, 0.34);

    --tint-brand-bg: #302016;
    --tint-brand-fg: #ff9552;

    --tint-success-bg: rgba(34, 197, 94, 0.16); --tint-success-fg: #4ade80; --tint-success-bd: rgba(34, 197, 94, 0.32);
    --tint-warning-bg: rgba(245, 158, 11, 0.18); --tint-warning-fg: #fbbf24; --tint-warning-bd: rgba(245, 158, 11, 0.32);
    --tint-danger-bg: rgba(248, 113, 113, 0.16); --tint-danger-fg: #f87171; --tint-danger-bd: rgba(248, 113, 113, 0.32);
    --tint-info-bg: rgba(96, 165, 250, 0.16); --tint-info-fg: #60a5fa; --tint-info-bd: rgba(96, 165, 250, 0.32);
    --tint-neutral-bg: rgba(255, 255, 255, 0.06); --tint-neutral-fg: var(--text-secondary); --tint-neutral-bd: rgba(255, 255, 255, 0.14);

    --gradient-brand: linear-gradient(135deg, #ff7a32 0%, #ff6a1a 60%, #e95a12 100%);
    /* Dark mode leans on borders/surface steps rather than shadow for depth. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
    --glow-cta: 0 10px 24px rgba(255, 106, 26, 0.30);
    --glow-brand: 0 8px 20px rgba(255, 106, 26, 0.26);
    --ring-focus: 0 0 0 3px var(--focus-ring);
}

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