/* Fondix design tokens — mockup v2 (fondix-ui) + dark mode */

:root {
  /* ─── Brand palette ─── */
  --fx-navy: rgb(27, 58, 92);
  --fx-navy-deep: #1B3A5C;
  --fx-navy-mid: oklch(42% 0.07 240);
  --fx-navy-hover: oklch(30% 0.07 240);
  --fx-amber: #E8A317;
  --fx-amber-hot: rgb(217, 119, 6);
  --fx-amber-hover: oklch(55% 0.16 60);
  --fx-on-navy: oklch(97% 0.008 245);
  --fx-on-navy-soft: oklch(86% 0.022 245);
  --fx-accent-ink: oklch(99% 0.01 85);

  --fx-primary: oklch(35% 0.08 240);
  --fx-primary-hover: oklch(40% 0.09 240);
  --fx-primary-subtle: oklch(95% 0.02 240);
  --fx-accent: oklch(75% 0.16 85);
  --fx-accent-hover: oklch(70% 0.18 85);
  --fx-accent-subtle: oklch(96% 0.04 85);

  /* ─── Surfaces ─── */
  --fx-bg: oklch(98.5% 0.003 260);
  --fx-surface: oklch(100% 0 0);
  --fx-surface-raised: oklch(99% 0.002 260);
  --fx-surface-muted: oklch(97% 0.005 260);
  --fx-sidebar-bg: oklch(100% 0 0);
  --fx-sidebar-active: oklch(94% 0.02 240);

  /* ─── Ink ─── */
  --fx-ink: oklch(18% 0.02 260);
  --fx-ink-secondary: oklch(36% 0.025 260);
  --fx-ink-muted: oklch(36% 0.025 260);
  --fx-ink-disabled: oklch(62% 0.01 260);

  /* ─── Borders ─── */
  --fx-border: oklch(90% 0.005 260);
  --fx-border-strong: oklch(82% 0.01 260);

  /* ─── Semantics ─── */
  --fx-success: oklch(50% 0.14 155);
  --fx-success-subtle: oklch(95% 0.04 155);
  --fx-warning: oklch(52% 0.12 70);
  --fx-warning-subtle: oklch(95% 0.04 70);
  --fx-error: oklch(46% 0.16 25);
  --fx-error-subtle: oklch(96% 0.03 25);
  --fx-info: oklch(50% 0.12 240);
  --fx-info-subtle: oklch(95% 0.03 240);
  --fx-rose: oklch(42% 0.14 350);
  --fx-rose-subtle: oklch(96% 0.045 350);

  --fx-kpi-tint-1: oklch(95% 0.03 155);
  --fx-kpi-tint-2: oklch(95% 0.03 240);
  --fx-kpi-tint-3: oklch(95% 0.03 70);
  --fx-kpi-tint-4: oklch(92% 0.05 25);

  /* ─── Typography ─── */
  --fx-font-body: Inter, system-ui, -apple-system, sans-serif;
  --fx-font-display: "DM Serif Display", Georgia, serif;
  --fx-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;

  --fx-text-xs: 0.75rem;
  --fx-text-sm: 0.833rem;
  --fx-text-base: 1rem;
  --fx-text-lg: 1.2rem;
  --fx-text-xl: 1.44rem;
  --fx-text-2xl: 1.728rem;
  --fx-text-3xl: 2.074rem;
  --fx-text-4xl: 2.488rem;

  /* ─── Layout ─── */
  --fx-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --fx-section: clamp(3.5rem, 7vw, 6rem);
  --fx-wrap: 72rem;
  --fx-header-h: 4.5rem;
  --fx-radius-xs: 4px;
  --fx-radius-sm: 6px;
  --fx-radius-md: 10px;
  --fx-radius-lg: 14px;
  --fx-radius-xl: 20px;

  /* ─── Elevation ─── */
  --fx-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.04);
  --fx-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.04);
  --fx-shadow-md: 0 4px 6px oklch(0% 0 0 / 0.05), 0 2px 4px oklch(0% 0 0 / 0.03);
  --fx-shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.06), 0 4px 6px oklch(0% 0 0 / 0.03);
  --fx-shadow-door: 0 18px 40px oklch(20% 0.04 240 / 0.28);

  /* ─── Z-index ─── */
  --fx-z-base: 0;
  --fx-z-dropdown: 10;
  --fx-z-sticky: 20;
  --fx-z-overlay: 40;
  --fx-z-modal-backdrop: 50;
  --fx-z-modal: 60;
  --fx-z-toast: 70;
  --fx-z-tooltip: 80;

  /* ─── Motion ─── */
  --fx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --fx-duration-fast: 120ms;
  --fx-duration: 200ms;
  --fx-duration-slow: 350ms;

  --fx-focus-ring: 0 0 0 3px oklch(55% 0.12 240 / 0.4);
  --fx-focus-on-navy: 0 0 0 3px oklch(92% 0.08 85 / 0.65);

  color-scheme: light;
  caret-color: var(--fx-ink);
  scrollbar-color: var(--fx-border-strong) var(--fx-bg);
}

::selection {
  background: var(--fx-amber);
  color: var(--fx-navy-deep);
}

[data-mud-theme="dark"], .mud-theme-dark {
  color-scheme: dark;
  caret-color: var(--fx-ink);
  --fx-bg: oklch(15% 0.02 260);
  --fx-surface: oklch(20% 0.02 260);
  --fx-surface-raised: oklch(22% 0.02 260);
  --fx-surface-muted: oklch(18% 0.02 260);
  --fx-sidebar-bg: oklch(13% 0.025 260);
  --fx-sidebar-active: oklch(25% 0.04 240);
  --fx-ink: oklch(95% 0.005 260);
  --fx-ink-secondary: oklch(72% 0.01 260);
  --fx-ink-muted: oklch(72% 0.01 260);
  --fx-ink-disabled: oklch(48% 0.01 260);
  --fx-border: oklch(28% 0.015 260);
  --fx-border-strong: oklch(38% 0.02 260);
  --fx-primary: oklch(72% 0.10 240);
  --fx-primary-hover: oklch(76% 0.11 240);
  --fx-primary-subtle: oklch(22% 0.04 240);
  --fx-accent: oklch(78% 0.15 85);
  --fx-navy-deep: oklch(32% 0.05 245);
  --fx-navy: oklch(72% 0.08 240);
  --fx-navy-hover: oklch(68% 0.08 240);
  --fx-on-navy: oklch(16% 0.02 245);
  --fx-on-navy-soft: oklch(78% 0.02 245);
  --fx-success-subtle: oklch(22% 0.04 155);
  --fx-warning-subtle: oklch(22% 0.04 70);
  --fx-error-subtle: oklch(22% 0.04 25);
  --fx-info-subtle: oklch(22% 0.04 240);
  --fx-rose: oklch(82% 0.08 350);
  --fx-rose-subtle: oklch(22% 0.05 350);
  --fx-kpi-tint-1: oklch(22% 0.04 155);
  --fx-kpi-tint-2: oklch(22% 0.04 240);
  --fx-kpi-tint-3: oklch(22% 0.04 70);
  --fx-kpi-tint-4: oklch(22% 0.05 25);
  --fx-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.2);
  --fx-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.3), 0 1px 2px oklch(0% 0 0 / 0.2);
  --fx-shadow-md: 0 4px 6px oklch(0% 0 0 / 0.25), 0 2px 4px oklch(0% 0 0 / 0.15);
  --fx-shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.35), 0 4px 6px oklch(0% 0 0 / 0.2);
}

[data-mud-theme="dark"] ::selection, .mud-theme-dark ::selection {
  background: var(--fx-amber);
  color: oklch(18% 0.02 245);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fx-duration-fast: 0.01ms;
    --fx-duration: 0.01ms;
    --fx-duration-slow: 0.01ms;
  }
}