/* ═══════════════════════════════════════════════════════════════════════════
   xf-fluent-tokens.css  ·  XupaFin shared design tokens (Fluent 2-based)
   ---------------------------------------------------------------------------
   The ONE source of truth for look & feel across Estate, Halal Tourism and
   Party Characters. All three apps load this file first; app stylesheets and
   components consume ONLY these tokens — never raw hex, px or font names.
   Change a value here and every app re-themes together, exactly like Fluent.

   Structure mirrors Fluent 2: neutral ramp + brand ramp + semantic tokens,
   a 4px spacing scale, a type ramp, radii, elevation and motion.
   Brand accent is tenant-brandable (like the Microsoft 365 accent).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Type ─────────────────────────────────────────────────────────────── */
  --xf-font-base: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --xf-font-mono: "Cascadia Code", "Segoe UI Mono", ui-monospace, "SF Mono", Consolas, monospace;
  /* type ramp (size / line-height) — Fluent ramp */
  --xf-font-caption2: 10px;  --xf-lh-caption2: 14px;
  --xf-font-caption1: 12px;  --xf-lh-caption1: 16px;
  --xf-font-body:     14px;  --xf-lh-body:     20px;   /* default body */
  --xf-font-subtitle2:16px;  --xf-lh-subtitle2:22px;
  --xf-font-subtitle1:20px;  --xf-lh-subtitle1:26px;
  --xf-font-title3:   24px;  --xf-lh-title3:   32px;
  --xf-font-title2:   28px;  --xf-lh-title2:   36px;
  --xf-font-title1:   40px;  --xf-lh-title1:   52px;
  --xf-font-display:  68px;  --xf-lh-display:  92px;
  --xf-weight-regular: 400; --xf-weight-medium: 500; --xf-weight-semibold: 600; --xf-weight-bold: 700;

  /* ── Brand ramp (tenant-brandable accent — default: Fluent communication blue) ── */
  --xf-brand-10: #061724;  --xf-brand-20: #082338;  --xf-brand-30: #0a2e4a;
  --xf-brand-40: #0c3b5e;  --xf-brand-50: #0e4775;  --xf-brand-60: #0f548c;
  --xf-brand-70: #115ea3;  --xf-brand-80: #0f6cbd;  /* primary */
  --xf-brand-90: #2886de;  --xf-brand-100:#479ef5;  --xf-brand-110:#62abf5;
  --xf-brand-120:#77b7f7;  --xf-brand-130:#96c6fa;  --xf-brand-140:#b4d6fa;
  --xf-brand-150:#cfe4fa;  --xf-brand-160:#ebf3fc;

  /* ── Neutral ramp (greys) ─────────────────────────────────────────────── */
  --xf-grey-0:  #ffffff;  --xf-grey-2:  #fafafa;  --xf-grey-4:  #f5f5f5;
  --xf-grey-6:  #f0f0f0;  --xf-grey-8:  #ebebeb;  --xf-grey-12: #e0e0e0;
  --xf-grey-16: #d6d6d6;  --xf-grey-24: #c2c2c2;  --xf-grey-38: #9e9e9e;
  --xf-grey-50: #808080;  --xf-grey-62: #616161;  --xf-grey-74: #424242;
  --xf-grey-84: #292929;  --xf-grey-90: #1a1a1a;  --xf-grey-96: #0a0a0a;

  /* ── Shared status ramp ───────────────────────────────────────────────── */
  --xf-success: #0e700e; --xf-success-bg: #e7f6e7;
  --xf-warning: #bc4b09; --xf-warning-bg: #fdf3e7;
  --xf-danger:  #b10e1c; --xf-danger-bg:  #fdeceb;
  --xf-info:    var(--xf-brand-80); --xf-info-bg: var(--xf-brand-160);

  /* ── Semantic tokens (what components actually reference) ──────────────── */
  --xf-fg-1:        var(--xf-grey-90);   /* primary text */
  --xf-fg-2:        var(--xf-grey-62);   /* secondary text */
  --xf-fg-disabled: var(--xf-grey-38);
  --xf-fg-on-brand: var(--xf-grey-0);
  --xf-bg-canvas:   var(--xf-grey-4);    /* app background */
  --xf-bg-surface:  var(--xf-grey-0);    /* cards, panels */
  --xf-bg-subtle:   var(--xf-grey-6);    /* hover/zebra */
  --xf-bg-brand:    var(--xf-brand-80);
  --xf-bg-brand-hover: var(--xf-brand-70);
  --xf-stroke-1:    var(--xf-grey-16);   /* dividers, card borders */
  --xf-stroke-2:    var(--xf-grey-24);   /* input borders */
  --xf-stroke-focus:var(--xf-brand-80);

  /* ── Spacing (4px scale) ──────────────────────────────────────────────── */
  --xf-space-xxs: 2px; --xf-space-xs: 4px; --xf-space-s: 8px; --xf-space-m: 12px;
  --xf-space-l: 16px;  --xf-space-xl: 20px; --xf-space-xxl: 24px; --xf-space-xxxl: 32px;
  --xf-space-4xl: 40px; --xf-space-5xl: 48px;

  /* ── Corner radius ────────────────────────────────────────────────────── */
  --xf-radius-none: 0; --xf-radius-s: 2px; --xf-radius-m: 4px;
  --xf-radius-l: 6px;  --xf-radius-xl: 8px; --xf-radius-circular: 9999px;

  /* ── Elevation (Fluent depth) ─────────────────────────────────────────── */
  --xf-shadow-2:  0 1px 2px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --xf-shadow-4:  0 2px 4px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --xf-shadow-8:  0 4px 8px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --xf-shadow-16: 0 8px 16px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
  --xf-shadow-64: 0 32px 64px rgba(0,0,0,.24),0 0 8px rgba(0,0,0,.20);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --xf-duration-fast: 100ms; --xf-duration-normal: 200ms; --xf-duration-slow: 300ms;
  --xf-ease-accel: cubic-bezier(.9,.1,1,.2);
  --xf-ease-decel: cubic-bezier(.1,.9,.2,1);
  --xf-ease-standard: cubic-bezier(.33,0,.67,1);

  /* ── App shell metrics (consistent nav across all 3 apps) ─────────────── */
  --xf-shell-topbar-h: 48px;
  --xf-shell-rail-w: 260px;
  --xf-shell-rail-collapsed-w: 48px;
}

/* ── Dark theme (Fluent dark) — apply .xf-theme-dark on <html> ──────────── */
/* html.-prefixed so a theme always outranks a brand :root override (equal
   specificity would otherwise let a later-loaded brand file win). */
html.xf-theme-dark {
  --xf-fg-1: var(--xf-grey-6); --xf-fg-2: var(--xf-grey-38); --xf-fg-disabled: var(--xf-grey-50);
  --xf-bg-canvas: var(--xf-grey-90); --xf-bg-surface: var(--xf-grey-84);
  --xf-bg-subtle: var(--xf-grey-74); --xf-stroke-1: var(--xf-grey-74); --xf-stroke-2: var(--xf-grey-62);
  --xf-bg-brand: var(--xf-brand-100); --xf-bg-brand-hover: var(--xf-brand-90);
}

/* ── High-contrast (Windows HC parity) — .xf-theme-hc ─────────────────── */
html.xf-theme-hc {
  --xf-fg-1: #ffffff; --xf-fg-2: #ffffff; --xf-bg-canvas: #000000; --xf-bg-surface: #000000;
  --xf-stroke-1: #ffffff; --xf-stroke-2: #ffffff; --xf-bg-brand: #1aebff; --xf-fg-on-brand: #000000;
}

@media (prefers-reduced-motion: reduce) {
  :root { --xf-duration-fast: 1ms; --xf-duration-normal: 1ms; --xf-duration-slow: 1ms; }
}