/* ═══════════════════════════════════════════════════════════════════════════
   xf-brand-xupafin.css  ·  XupaFin brand override on the Fluent token system
   ---------------------------------------------------------------------------
   Loaded AFTER xf-fluent-tokens.css. Keeps the warm XupaFin identity (coral /
   teal / gold / cream / ink) while every component gets the Fluent token
   structure (spacing, radius, elevation, type ramp, themes). New components use
   the --xf-* semantic tokens and render in XupaFin brand automatically; existing
   app styles (--coral, --ink, …) are untouched, so nothing re-skins abruptly.
   This is the tenant-brandable accent from the design-system standard.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand ramp → XupaFin coral (primary) */
  --xf-brand-160:#fdeceb; --xf-brand-150:#fbdcd9; --xf-brand-140:#f7bdb8;
  --xf-brand-130:#f49e97; --xf-brand-120:#f28981; --xf-brand-110:#f0776e;
  --xf-brand-100:#f4544a; --xf-brand-90:#ef433a; --xf-brand-80:#e8342b;  /* primary coral */
  --xf-brand-70:#c2483f;  --xf-brand-60:#a83a33; --xf-brand-50:#8c302a;

  /* Secondary + accents */
  --xf-secondary:#2aa9a0;         /* teal */
  --xf-gold:#f5c242;
  --xf-blush:#f7dcd4;

  /* Warm semantic surfaces (light theme) */
  --xf-bg-canvas:  #fbf3e7;       /* cream */
  --xf-bg-surface: #ffffff;
  --xf-bg-subtle:  #f3ecdd;
  --xf-fg-1:       #16324f;       /* ink */
  --xf-fg-2:       #57503f;
  --xf-stroke-1:   #e7e1d6;       /* line */
  --xf-stroke-2:   #d8d0c2;
  --xf-bg-brand:       var(--xf-brand-80);
  --xf-bg-brand-hover: var(--xf-brand-70);
  --xf-stroke-focus:   var(--xf-brand-80);
  --xf-fg-on-brand:    #ffffff;

  /* Status kept on the XupaFin greens/reds */
  --xf-success:#2aa9a0; --xf-warning:#c85f17; --xf-danger:#c2483f;
  --xf-info:var(--xf-secondary); --xf-info-bg:#e6f5f3;

  /* Brand display font available alongside the Fluent system stack */
  --xf-font-brand:"Fredoka","Segoe UI",-apple-system,sans-serif;
}

/* Dark theme: keep XupaFin hues, darken surfaces.
   html.-prefixed so the theme outranks this file's own :root brand tokens. */
html.xf-theme-dark {
  --xf-bg-canvas:#1a2230; --xf-bg-surface:#222c3b; --xf-bg-subtle:#2c3748;
  --xf-fg-1:#f0ece3; --xf-fg-2:#c2bcae; --xf-stroke-1:#39404d; --xf-stroke-2:#4a515e;
  --xf-bg-brand:var(--xf-brand-90); --xf-bg-brand-hover:var(--xf-brand-80);
}