/* FitCloud design tokens — the single source of truth.
   Spec: docs/design/2026-08-28-platform-ui-audit.md (decision record).

   Brand and action are deliberately different colours. Coral is the brand:
   it sits at hue 38° in OKLCH, between error red (27°) and warning amber
   (49°), so a coral button neighbours "no-show" and "waitlist" on the very
   screens where those states appear together. It also cannot carry text —
   white on #E86B4A is 3.17:1, below AA. Coral therefore keeps the logo,
   marketing hero, display type and one chart series, and never paints a
   control. Teal at hue 192° is 41° clear of every semantic colour and
   carries white text at 5.16:1; it is a re-stepped #0f8b8d, the most-used
   hardcoded colour in the view layer, promoted rather than replaced.

   Every value below is either lifted from the existing app or contrast
   validated. Light-mode text-bearing colours clear 4.5:1 on --surface;
   dark-mode equivalents clear 4.5:1 on the dark --bg. */

:root,
.fc-theme-light {
  /* Brand — decorative and display only, never a control, never text */
  --fc-brand-coral: #E86B4A;
  --fc-brand-mint:  #C8F5C8;
  --fc-brand-gold:  #DEB87D;

  /* Action accent — the only accent that touches type or a control */
  --fc-accent-fill:   #0C7A78;              /* button background, 5.16:1 with white */
  --fc-accent-on:     #FFFFFF;              /* text on --fc-accent-fill */
  --fc-accent-ink:    #0A6B69;              /* accent text: 5.33:1 on --fc-accent-soft, 6.33:1 on white */
  --fc-accent-hover:  #095F5D;              /* 7.48:1 */
  --fc-accent-soft:   #D6F1EF;              /* tiles, badges */
  --fc-accent-subtle: rgba(12, 122, 120, 0.09); /* hover rows, selected rows */
  --fc-accent-rgb:    12 122 120;

  /* Surfaces — one neutral ramp */
  --fc-bg:             #F7F8FA;
  --fc-surface:        #FFFFFF;
  --fc-surface-muted:  #F1F3F7;
  --fc-surface-subtle: #E6E9EF;
  --fc-border:         #E3E7EE;
  --fc-border-strong:  #C9D0DB;

  /* Ink */
  --fc-text:       #101828;
  --fc-text-muted: #5A6478;
  --fc-text-soft:  #6B7688;   /* 4.59:1 on white; #8A94A6 was 3.06 */

  /* Semantic — the brand tints are the light end of these, deliberately:
     mint is the tint of success, gold the tint of warning. */
  --fc-success:      #12702F;   /* 5.45:1 on --fc-success-tint, 6.20:1 on white */
  --fc-success-tint: #DFF6E4;
  --fc-warning:      #9A4708;   /* 5.40:1 on --fc-warning-tint, 6.40:1 on white */
  --fc-warning-tint: #F7EAD6;
  --fc-error:        #C81E1E;   /* 4.85:1 on --fc-error-tint, 5.74:1 on white */
  --fc-error-on:     #FFFFFF;   /* label on --fc-error */
  --fc-error-tint:   #FDE7E7;
  --fc-info:         #0F766E;
  --fc-info-tint:    #D6F1EF;

  /* Categorical chart series — validated for CVD separation in this order */
  --fc-series-1: #0A8F86;
  --fc-series-2: #B0562F;
  --fc-series-3: #7C4DA8;

  --fc-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.04), 0 4px 6px rgba(16, 24, 40, 0.02);
  --fc-shadow-md: 0 4px 6px rgba(16, 24, 40, 0.05), 0 10px 20px rgba(16, 24, 40, 0.04);
  --fc-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.08);

  /* Geometry — measured from the components already shipped */
  --fc-radius-input:  0.375rem;  /*  6px */
  --fc-radius-button: 0.5rem;    /*  8px */
  --fc-radius-tile:   0.75rem;   /* 12px */
  --fc-radius-card:   1rem;      /* 16px */
  --fc-radius-pill:   9999px;

  /* Type — Outfit for display, DM Sans for text; both already shipped in
     this repo (marketing and the member landing pages respectively), so
     adopting them retires Inter, Cormorant Garamond and bare system-ui
     without licensing or loading anything new. */
  --fc-font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fc-font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Dark is a selected palette, not an inversion: each step is re-picked and
   re-validated against the dark surface. */
:root.fc-theme-dark,
.fc-theme-dark,
[data-theme="dark"],
.owner-shell.owner-theme-dark {
  --fc-brand-coral: #E86B4A;
  --fc-brand-mint:  #C8F5C8;
  --fc-brand-gold:  #DEB87D;

  --fc-accent-fill:   #5FCFC4;              /* 9.53:1 on --fc-bg */
  --fc-accent-on:     #06231F;              /* 8.84:1 on --fc-accent-fill */
  --fc-accent-ink:    #5FCFC4;

  /* Re-point Tailwind's theme colours inside the dark scope. @theme emits
     these at :root, so `--color-accent-soft: var(--fc-accent-soft)` resolved
     against the light value there and inherited it frozen -- .bg-accent-soft
     painted #D6F1EF on a dark page while .fc-badge beside it, reading
     --fc-accent-soft directly, was correct. Same failure as the --owner-*
     aliases, one layer up. */
  --color-accent:      var(--fc-accent-fill);
  --color-accent-hover: var(--fc-accent-hover);
  --color-accent-soft: var(--fc-accent-soft);
  --color-accent-ink:  var(--fc-accent-ink);
  --fc-accent-hover:  #8BDED6;              /* 11.49:1 */
  --fc-accent-soft:   rgba(95, 207, 196, 0.22);
  --fc-accent-subtle: rgba(95, 207, 196, 0.11);
  --fc-accent-rgb:    95 207 196;

  --fc-bg:             #0F172A;
  --fc-surface:        #151E31;
  --fc-surface-muted:  #1D2840;
  --fc-surface-subtle: #26324B;
  --fc-border:         #26324B;
  --fc-border-strong:  #38455F;

  --fc-text:       #E8EDF5;
  --fc-text-muted: #9AA6BC;
  --fc-text-soft:  #7C89A3;   /* 4.73:1 on --fc-surface; #6C7893 was 3.76 */

  --fc-success:      #7EE0A0;
  --fc-success-tint: rgba(200, 245, 200, 0.14);
  --fc-warning:      #E9C48A;
  --fc-warning-tint: rgba(222, 184, 125, 0.14);
  --fc-error:        #F87171;
  --fc-error-on:     #450A0A;   /* the dark error is light; white on it fails */
  --fc-error-tint:   rgba(248, 113, 113, 0.14);
  --fc-info:         #5FCFC4;
  --fc-info-tint:    rgba(95, 207, 196, 0.14);

  --fc-series-1: #2FA79D;
  --fc-series-2: #D3734E;
  --fc-series-3: #9E82D6;

  --fc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.20);
  --fc-shadow-md: 0 8px 18px rgba(0, 0, 0, 0.34), 0 18px 44px rgba(0, 0, 0, 0.28);
  --fc-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.34);
}

/* Type scale — six steps, replacing the eight ad-hoc heading sizes the audit
   found. text-lg was being used for 150 headings, which is why h1 and h2 read
   as body copy. */
.fc-display { font-family: var(--fc-font-display); font-size: 2.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.fc-h1      { font-family: var(--fc-font-display); font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.fc-h2      { font-family: var(--fc-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.fc-h3      { font-family: var(--fc-font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.fc-h4      { font-family: var(--fc-font-display); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.45; }
.fc-body    { font-family: var(--fc-font-body); font-size: 0.875rem; line-height: 1.55; }
.fc-caption { font-family: var(--fc-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* Base typography. Outfit carries headings, DM Sans carries text. Views still
   set their own sizes; this fixes only the family, which is what made eight
   different heading sizes read as one undifferentiated block.

   The member landing pages are excluded: LandingPageSetting lets a tenant
   choose its own faces there and applies them with !important, which is a
   feature, not drift. */
body {
  font-family: var(--fc-font-body);
  -webkit-font-smoothing: antialiased;
}

/* Paint the page. Without this only .owner-shell set a background and an ink
   colour, so on the other seven .fc-app layouts the body stayed transparent
   with the browser's default black text — which in dark mode put black text on
   a dark surface. Scoped to .fc-app so surfaces that opt out (the tenant
   landing pages) keep their own treatment, and kept at a single class of
   specificity so a layout's own background, like the member portal's gradient,
   still wins on source order. */
.fc-app {
  background-color: var(--fc-bg);
  color: var(--fc-text);
}

h1, h2, h3, h4, h5, h6,
.fc-display, .fc-h1, .fc-h2, .fc-h3 {
  font-family: var(--fc-font-display);
}