/* Fondix design tokens v2 — ispirato a Be²Force, registro product */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:opsz,wght@14..32,300..700&display=swap');

:root {
  /* ─── Brand palette ─── */
  --fx-primary: oklch(35% 0.08 240);       /* navy deep */
  --fx-primary-hover: oklch(40% 0.09 240);
  --fx-primary-subtle: oklch(95% 0.02 240); /* very light navy tint */
  --fx-accent: oklch(75% 0.16 85);          /* amber/gold */
  --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);          /* cool off-white, NOT cream */
  --fx-surface: oklch(100% 0 0);            /* pure white cards */
  --fx-surface-raised: oklch(99% 0.002 260);
  --fx-sidebar-bg: oklch(97% 0.005 260);    /* slightly cooler for sidebar */
  --fx-sidebar-active: oklch(94% 0.02 240); /* navy-tinted active item */

  /* ─── Ink (text) ─── */
  --fx-ink: oklch(18% 0.02 260);            /* near-black with cool tint */
  --fx-ink-secondary: oklch(45% 0.02 260);  /* secondary text */
  --fx-ink-muted: oklch(58% 0.015 260);     /* placeholders, captions */
  --fx-ink-disabled: oklch(70% 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(60% 0.15 70);
  --fx-warning-subtle: oklch(95% 0.04 70);
  --fx-error: oklch(50% 0.18 25);
  --fx-error-subtle: oklch(95% 0.04 25);
  --fx-info: oklch(50% 0.12 240);
  --fx-info-subtle: oklch(95% 0.03 240);

  /* ─── KPI tints (card backgrounds) ─── */
  --fx-kpi-tint-1: oklch(95% 0.03 155);    /* green tint */
  --fx-kpi-tint-2: oklch(95% 0.03 240);    /* blue tint */
  --fx-kpi-tint-3: oklch(95% 0.03 70);     /* amber tint */
  --fx-kpi-tint-4: oklch(92% 0.05 25);     /* coral/red tint for alerts */

  /* ─── Typography ─── */
  --fx-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --fx-font-display: 'DM Serif Display', Georgia, serif;
  --fx-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;

  /* Type scale (1.2 ratio, product-tight) */
  --fx-text-xs: 0.694rem;   /* 11px */
  --fx-text-sm: 0.833rem;   /* 13px */
  --fx-text-base: 1rem;     /* 16px */
  --fx-text-lg: 1.2rem;     /* 19px */
  --fx-text-xl: 1.44rem;    /* 23px */
  --fx-text-2xl: 1.728rem;  /* 28px */
  --fx-text-3xl: 2.074rem;  /* 33px */
  --fx-text-4xl: 2.488rem;  /* 40px */

  /* ─── Layout ─── */
  --fx-gutter: 1.5rem;
  --fx-section: 2.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);

  /* ─── Z-index scale ─── */
  --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);  /* expo out */
  --fx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --fx-duration-fast: 120ms;
  --fx-duration: 200ms;
  --fx-duration-slow: 350ms;

  /* ─── Focus ─── */
  --fx-focus-ring: 0 0 0 3px oklch(60% 0.12 240 / 0.35);
}

/* ─── Dark mode tokens ─── */
[data-mud-theme="dark"], .mud-theme-dark {
  --fx-bg: oklch(15% 0.02 260);
  --fx-surface: oklch(20% 0.02 260);
  --fx-surface-raised: oklch(22% 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(58% 0.01 260);
  --fx-ink-disabled: oklch(42% 0.01 260);
  --fx-border: oklch(28% 0.015 260);
  --fx-border-strong: oklch(35% 0.02 260);
  --fx-primary: oklch(60% 0.10 240);
  --fx-primary-hover: oklch(65% 0.11 240);
  --fx-primary-subtle: oklch(22% 0.04 240);
  --fx-accent: oklch(78% 0.15 85);
  --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);
}

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