/* ═══════════════════════════════════════════════════════════════════════════
   xf-fluent-adopt.css  ·  Adoption layer (load AFTER the app stylesheet)
   ---------------------------------------------------------------------------
   All three apps use the same semantic variable names (--cream, --ink, --coral,
   …). This file re-points those names onto the Fluent tokens, so the whole app
   takes the Fluent (Azure-grade) palette and type with NO change to the app's
   own rules. Reversible: remove this <link> to revert to the original theme.

   Load order in every app:
     xf-fluent-tokens.css   (defines --xf-* tokens)
     <app stylesheet>       (defines & uses --cream/--ink/…)
     xf-fluent-adopt.css    (re-points --cream/--ink/… → --xf-* ; wins, being last)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* surfaces */
  --cream: var(--xf-bg-canvas);   --page: var(--xf-bg-canvas);   --mutedbg: var(--xf-bg-subtle);
  --card: var(--xf-bg-surface);
  /* text */
  --ink: var(--xf-fg-1);          --ink-2: var(--xf-brand-70);   --sec: var(--xf-fg-2);   --muted: var(--xf-fg-2);
  /* brand / accent */
  --coral: var(--xf-bg-brand);    --coral-2: var(--xf-bg-brand-hover);
  --primary: var(--xf-bg-brand);  --onprimary: var(--xf-fg-on-brand);   --accent: var(--xf-bg-brand);
  --teal: var(--xf-brand-100);    --sky: var(--xf-brand-80);     --sky-2: var(--xf-brand-70);
  --blush: var(--xf-brand-160);
  /* lines */
  --line: var(--xf-stroke-1);     --border: var(--xf-stroke-1);
  /* status */
  --good: var(--xf-success);      --bad: var(--xf-danger);       --gold: var(--xf-warning);
  --orange: var(--xf-warning);    --orange-2: var(--xf-warning);
  /* shadow + motion (map app aliases to Fluent) */
  --shadow-sm: var(--xf-shadow-2); --shadow-md: var(--xf-shadow-8); --shadow-lg: var(--xf-shadow-16);
  --ease: var(--xf-ease-standard);
}

/* Type: switch the two brand fonts to the Fluent (Segoe-first) stack */
body, input, select, textarea, button {
  font-family: var(--xf-font-base);
}
h1, h2, h3, h4, h5, h6, .display, .brand-name {
  font-family: var(--xf-font-base);
  letter-spacing: normal;
}