/*
  FWF Apps Design System — Foundation (tokens + base)
  The brand foundation every FWF app loads: semantic tokens, both themes (dark
  default + light via [data-fwf-app-theme]), base reset/typography, the focus
  ring, and the global reduced-motion override. No layout, no components.
  This file sits under docs/fwf-overarching-design-notes.md and
  docs/fwfa-app-design-notes.md: keep primitives in --fwf/--fwfa reference roles
  and expose reusable semantic roles for components to consume.
  Declares the layer order so à-la-carte includes still cascade correctly.
*/
@layer fwfa.tokens, fwfa.base, fwfa.components, fwfa.patterns;

@layer fwfa.tokens {
:root,
[data-fwf-app-theme="dark"] {
  /* Core FWF brand primitives (--fwfa-fwf-*) are GENERATED from the single source
     (fwf-tokens/source.json) into ./fwfa-primitives.css, which fwf-apps.css imports
     ahead of this file. Do NOT hand-copy primitive values back in here — that fork
     is exactly what silently drifts from tokens.css. Edit source.json + run
     `node fwf-tokens/build.mjs`. The app-only primitives below are not brand tokens
     (no source.json entry), so they stay hand-authored here. */

  /* FreshVibe app extension primitives */
  --fwfa-app-navy-950: #020e15;
  --fwfa-app-navy-925: #051520;
  --fwfa-app-navy-900: #001a24;
  --fwfa-app-navy-850: #00202e;
  --fwfa-app-navy-800: #002a39;
  --fwfa-app-navy-700: #003d52;
  --fwfa-app-status: #6fab1b;

  /* Semantic colour roles */
  --fwfa-page-bg: var(--fwfa-app-navy-950);
  --fwfa-page-bg-soft: #071b25;
  --fwfa-shell-bg: #021a26;
  --fwfa-shell-bg-muted: rgba(255, 255, 255, 0.02);
  --fwfa-surface: rgba(255, 255, 255, 0.045);
  --fwfa-surface-hover: rgba(255, 255, 255, 0.07);
  --fwfa-surface-strong: rgba(255, 255, 255, 0.095);
  --fwfa-border: rgba(255, 255, 255, 0.08);
  --fwfa-border-strong: rgba(255, 255, 255, 0.14);
  --fwfa-border-faint: rgba(255, 255, 255, 0.045);
  --fwfa-text: #ffffff;
  --fwfa-text-soft: #ccd4d7;
  --fwfa-text-muted: #99aab0;
  --fwfa-text-faint: #8a9ba1; /* ~6:1 on the navy shell — clears the 4.5:1 floor (was #64787f, ~3.85:1) */
  --fwfa-accent: var(--fwfa-fwf-yellow);
  --fwfa-accent-strong: var(--fwfa-fwf-orange);
  --fwfa-accent-calm: var(--fwfa-fwf-sky);
  --fwfa-success: var(--fwfa-fwf-green);
  --fwfa-warning: var(--fwfa-fwf-yellow);
  --fwfa-danger: var(--fwfa-fwf-orange);
  --fwfa-info: var(--fwfa-fwf-sky);
  /* Primary-button fill deepening steps — the neutral white block stepping toward
     grey on hover/active. A neutral move, never a hue change, since all blue is
     reserved for links and focus. Light theme re-points these to navy steps. */
  --fwfa-primary-hover: #ececec;
  --fwfa-primary-active: #d9d9d9;

  /* Typography
     DELIBERATE app divergence from the brand type scale in fwf-tokens/source.json:
     the app runs one step tighter for dense product UI. Mapping (don't "fix" to match):
       --fwfa-type-hero == brand --t-h1 (clamp 2→3rem)   ← note the one-step name offset
       --fwfa-type-h1   = app-only intermediate (clamp 1.75→2.5rem, no brand equiv)
       --fwfa-type-h2/h3 run smaller than brand --t-h2/h3 on purpose.
     Families + body/sm/xs match brand. See token-drift audit doc for the full diff. */
  --fwfa-font-display: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fwfa-font-body: "Wonder Unit Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fwfa-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fwfa-type-hero: clamp(2rem, 1.55rem + 1.94vw, 3rem);
  --fwfa-type-h1: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --fwfa-type-h2: clamp(1.35rem, 1.18rem + 0.6vw, 1.75rem);
  --fwfa-type-h3: 1.125rem;
  --fwfa-type-body: 1rem;
  --fwfa-type-sm: 0.875rem;
  --fwfa-type-xs: 0.75rem;
  --fwfa-type-micro: 0.6875rem;
  --fwfa-leading-tight: 1.12;
  --fwfa-leading-body: 1.55;
  /* Weight for the small mono/uppercase label register (kicker, label, badge,
     table headers). Medium — 700 reads too heavy at micro/xs sizes. */
  --fwfa-weight-label: 500;

  /* Layout */
  --fwfa-space-1: 0.25rem;
  --fwfa-space-2: 0.5rem;
  --fwfa-space-3: 0.75rem;
  --fwfa-space-4: 1rem;
  --fwfa-space-5: 1.5rem;
  --fwfa-space-6: 2rem;
  --fwfa-space-7: 3rem;
  --fwfa-space-8: 4rem;
  --fwfa-page-pad: clamp(1rem, 4vw, 4rem);
  --fwfa-content-max: 73.75rem;
  --fwfa-shell-max: 82rem;
  --fwfa-sidebar-width: 21rem;
  --fwfa-topbar-height: 3rem;
  --fwfa-grid-min: 16rem;
  --fwfa-grid-gap: var(--fwfa-space-4);
  --fwfa-stack-gap: var(--fwfa-space-4);
  --fwfa-cluster-gap: var(--fwfa-space-3);
  /* The statusbar is the thinner in-surface chrome bar (heads the main column),
     distinct from the shell-spanning topbar. */
  --fwfa-statusbar-height: 2.75rem;

  /* Shape and depth */
  /* Radius — aligned to the core FWF scale: 0.25rem for product controls
     (button, input), 0.375rem for containers (card, panel, badge, note, modal),
     0.5rem (lg) as the app radius ceiling for larger bespoke surfaces such as the
     inset workspace main. The app caps at lg — there is no xl/2xl step. */
  --fwfa-radius-xs: 0.125rem;
  --fwfa-radius-sm: 0.25rem;
  --fwfa-radius-md: 0.375rem;
  --fwfa-radius-lg: 0.5rem;
  --fwfa-radius-pill: 9999px;
  --fwfa-shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.22);
  --fwfa-shadow-float: 0 16px 48px rgba(0, 0, 0, 0.42);
  --fwfa-focus: 0 0 0 3px rgba(119, 189, 219, 0.34);
  --fwfa-tap: 2.75rem;
  --fwfa-control: 1.8rem;
  --fwfa-control-compact: 1.6rem;
  /* Text-button consistency floor (~64px, the Material value): evens short labels
     like Save / OK / Delete so button rows line up, without bloating dense layouts.
     A floor, not a fixed width — longer labels expand past it. Applies to the
     standard button only; icon buttons stay square (--fwfa-control) and the compact
     variant stays content-sized for density. */
  --fwfa-button-min: 4rem;

  /* Motion */
  --fwfa-dur-fast: 120ms;
  --fwfa-dur-base: 200ms;
  --fwfa-dur-slow: 320ms;
  --fwfa-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Callout icons — Lucide glyphs as mask-images (tinted via background-color at
     the call site, so they theme-switch for free). No icon background, per the
     FWF callout pattern. */
  --fwfa-icon-info: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
  --fwfa-icon-tip: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0Z'/><path d='M20 3v4'/><path d='M22 5h-4'/><path d='M4 17v2'/><path d='M5 18H3'/></svg>");
  --fwfa-icon-warn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
  --fwfa-icon-success: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
  --fwfa-icon-danger: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
  /* Check — a masked glyph (tinted via background-color at the call site), used for
     the current-selection tick in menus. Stroke %23000 like the callout icons. */
  --fwfa-icon-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  /* Chevron — the select / disclosure arrow. Unlike the masked callout icons this
     is a background-image (a <select> is a replaced element and can't take a masked
     pseudo-element), so its colour is baked into the SVG and re-declared per theme.
     Muted-light here for the dark shell; the light theme overrides it below. */
  --fwfa-icon-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399aab0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

[data-fwf-app-theme="light"] {
  --fwfa-page-bg: #ffffff;
  --fwfa-page-bg-soft: #f1f8fb;
  --fwfa-shell-bg: #ffffff;
  --fwfa-shell-bg-muted: rgba(8, 27, 51, 0.025);
  --fwfa-surface: #f7fbfd;
  --fwfa-surface-hover: #edf7fb;
  --fwfa-surface-strong: #e4f2f8;
  --fwfa-border: #ccd4d7;
  --fwfa-border-strong: #99aab0;
  --fwfa-border-faint: rgba(8, 27, 51, 0.06);
  --fwfa-text: var(--fwfa-fwf-navy);
  --fwfa-text-soft: var(--fwfa-fwf-charcoal);
  --fwfa-text-muted: #65747b;
  --fwfa-text-faint: #69767c; /* ~4.7:1 on white/base surface — clears the 4.5:1 floor, stays quieter than muted (was #808e95, ~3.37:1) */
  --fwfa-primary-hover: #11355c; /* navy fill lightening one step on hover */
  --fwfa-primary-active: #050f1b; /* navy fill deepening on press */
  /* Chevron re-baked in the light theme's muted ink so the arrow stays readable. */
  --fwfa-icon-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365747b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --fwfa-focus: 0 0 0 3px rgba(8, 27, 51, 0.18);
  --fwfa-shadow-soft: 0 12px 28px rgba(8, 27, 51, 0.08);
  --fwfa-shadow-float: 0 16px 48px rgba(8, 27, 51, 0.14);
}
}

@layer fwfa.base {
.fwfa-root,
.fwfa-root * {
  box-sizing: border-box;
}

.fwfa-root {
  min-height: 100%;
  background: var(--fwfa-page-bg);
  color: var(--fwfa-text);
  font-family: var(--fwfa-font-body);
  line-height: var(--fwfa-leading-body);
  text-rendering: optimizeLegibility;
}

.fwfa-root button,
.fwfa-root input,
.fwfa-root select,
.fwfa-root textarea {
  font: inherit;
}

.fwfa-root button,
.fwfa-root a,
.fwfa-root input,
.fwfa-root select,
.fwfa-root textarea {
  outline-offset: 3px;
}

/* Keyboard focus — an offset outline (not a box-shadow). The offset gap puts the
   page colour between fill and ring so contrast never depends on the element's
   fill, it follows border-radius, and unlike box-shadow it survives forced-colors
   / Windows High Contrast mode. */
.fwfa-root :focus-visible {
  outline: 2px solid var(--fwfa-accent-calm);
  outline-offset: 3px;
}

/* Visually hidden, still announced — for labels a screen reader needs but the
   eye doesn't (e.g. the Thinking indicator's status text behind its dots). */
.fwfa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fwfa-root *,
  .fwfa-root *::before,
  .fwfa-root *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
}