/* VENDORED COPY — do not hand-edit.
   TODO: sync from @forward/ui-tokens (packages/ui-tokens/src/tokens.css).
   This is a static PWA with no build step, so it cannot resolve a node_modules
   path at runtime; the token layer is vendored here and linked from index.html.
   The Google Fonts @import below is commented out on purpose: Awinel is an
   offline-first PWA and does not reference Inter/JetBrains Mono (it uses the
   system stack), so importing them would only add a CDN network call with no
   visual effect. Re-enable / self-host when the app actually adopts the
   var(--forward-*) type tokens in B1+. */

/* ============================================================================
   Forward Design System — token layer
   ----------------------------------------------------------------------------
   Every design rendered against this system receives this file (and its @import
   closure). Style with the var(--forward-*) tokens below; the full rationale for
   each value lives in guidelines/04-visual-direction.md.

   Provenance of each value is marked:
     [brief]    = copied verbatim from the written brief (04-visual-direction.md)
     [resolved] = the brief deferred this to the designer; resolved here.
                  Change these freely — they are not contractual.
   ============================================================================ */

/* Fonts. The brief mandates Inter (UI) + JetBrains Mono (data/mono). Loaded here
   from the Google Fonts CDN so previews render; per the brief, production should
   SELF-HOST these to keep the PWA offline-capable. Inter is the customer's
   explicit type spec — keep it even though generic guidance discourages Inter. */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500&display=swap'); */

:root {
  /* ---- Typography [brief: type stack + scale table] ---- */
  --forward-font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --forward-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --forward-text-display-l: 600 40px/48px var(--forward-font-ui);   /* public hero */
  --forward-text-display-s: 600 28px/36px var(--forward-font-ui);   /* web page title */
  --forward-text-h1: 600 22px/28px var(--forward-font-ui);
  --forward-text-h2: 600 18px/24px var(--forward-font-ui);
  --forward-text-h3: 600 15px/20px var(--forward-font-ui);
  --forward-text-body-l: 400 16px/24px var(--forward-font-ui);
  --forward-text-body: 400 14px/20px var(--forward-font-ui);        /* default */
  --forward-text-body-s: 400 13px/18px var(--forward-font-ui);
  --forward-text-micro: 500 12px/16px var(--forward-font-ui);       /* labels, meta */
  --forward-text-mono-s: 400 12px/16px var(--forward-font-mono);    /* hashes, IDs */
  --forward-text-mono: 400 13px/20px var(--forward-font-mono);      /* canonical JSON, numbers */
  /* Numeric columns use tabular figures everywhere: font-feature-settings: "tnum" 1; */

  /* ---- Neutrals — light theme (default) [brief] ---- */
  --forward-bg-canvas: #FAFAF8;      /* warm off-white, not sterile */
  --forward-surface: #FFFFFF;        /* cards, popovers */
  --forward-border-subtle: #EDEBE7;
  --forward-border-medium: #D9D5CE;
  --forward-text-primary: #1E1D1A;   /* near-black, warmer than pure black */
  --forward-text-secondary: #5A574F;
  --forward-text-tertiary: #8A8578;  /* labels, meta */
  --forward-text-disabled: #B8B4A8;

  /* ---- Accent — one, spec-deferred; resolved to muted terracotta ----
     [resolved] Primary CTA, active nav state, key-metric highlight ONLY.
     Distinct in hue from the trust color so a CTA never reads as "trusted". */
  --forward-accent: #B85C3F;
  --forward-accent-hover: #A54E33;   /* [resolved] */
  --forward-accent-active: #8F4229;  /* [resolved] */
  --forward-accent-fg: #FFFFFF;      /* [resolved] text on accent */

  /* ---- Trust color — dedicated [brief: teal ~#2B6A6A] ----
     RESERVED for signed / verified / anchored trust affordances. NEVER a CTA,
     never generic UI. When a user sees this color it means "cryptographically
     attested." See guidelines/11-trust-affordances.md. */
  --forward-trust: #2B6A6A;
  --forward-trust-soft: #E3EDED;     /* [resolved] trust-tinted fill */
  --forward-trust-fg: #FFFFFF;       /* [resolved] text on trust */

  /* ---- Semantic colors [brief describes them qualitatively; values resolved] ----
     Danger is deliberately a truer red than the terracotta accent so the two
     never collide (the brief requires danger be "distinct from the accent"). */
  --forward-success: #5E8C61;        /* [resolved] muted sage — NON-trust "done" */
  --forward-success-soft: #E7EFE7;   /* [resolved] */
  --forward-warning: #C8892E;        /* [resolved] warm ochre/amber — needs attention */
  --forward-warning-soft: #F6EBD7;   /* [resolved] */
  --forward-danger: #A4342A;         /* [resolved] muted red — violation/failure */
  --forward-danger-soft: #F2E0DE;    /* [resolved] */
  --forward-info: #4A6C8C;           /* [resolved] soft slate blue */
  --forward-info-soft: #E2E9EF;      /* [resolved] */

  /* ---- Data-viz ramp — colorblind-safe [brief recommends viridis + Set2] ----
     [resolved] to concrete swatches. NOTE: categorical #2 (orange) and #1
     (teal-green) sit near the accent and trust colors; keep data-viz visually
     separated from semantic/trust UI so meaning stays unambiguous. */
  --forward-seq-1: #FDE725;  /* viridis 5-step, low → high */
  --forward-seq-2: #5EC962;
  --forward-seq-3: #21918C;
  --forward-seq-4: #3B528B;
  --forward-seq-5: #440154;
  --forward-cat-1: #66C2A5;  /* Set2 categorical, 8 variants */
  --forward-cat-2: #FC8D62;
  --forward-cat-3: #8DA0CB;
  --forward-cat-4: #E78AC3;
  --forward-cat-5: #A6D854;
  --forward-cat-6: #FFD92F;
  --forward-cat-7: #E5C494;
  --forward-cat-8: #B3B3B3;

  /* ---- Spacing — 4px base [brief] ---- */
  --forward-space-1: 4px;
  --forward-space-2: 8px;
  --forward-space-3: 12px;
  --forward-space-4: 16px;
  --forward-space-6: 24px;   /* card padding */
  --forward-space-8: 32px;   /* section spacing, desktop page margin */
  --forward-space-12: 48px;
  --forward-space-16: 64px;

  /* ---- Radii [brief] ---- */
  --forward-radius-sm: 6px;    /* buttons, inputs, badges */
  --forward-radius-md: 10px;   /* cards, popovers */
  --forward-radius-lg: 14px;   /* modals, sheets */
  --forward-radius-pill: 999px;

  /* ---- Elevation — minimal, two steps max [brief] ---- */
  --forward-elev-0: none;                                                        /* border only */
  --forward-elev-1: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
  --forward-elev-2: 0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.08);   /* modals only */

  /* ---- Motion — restrained; state, not delight [brief] ---- */
  --forward-motion-enter: 150ms cubic-bezier(0.2, 0, 0.13, 1.5);
  --forward-motion-exit: 100ms ease-in;

  /* ---- Focus ring [brief]: always visible, 2px trust color, 2px offset ---- */
  --forward-focus-ring: 0 0 0 2px var(--forward-bg-canvas), 0 0 0 4px var(--forward-trust);

  /* ---- Density [brief]: comfortable = 1, compact = 0.85 ----
     Scales vertical spacing + row heights only, never typography or radii. */
  --forward-density-scale: 1;

  /* ---- Layout max-widths [brief: grid] ---- */
  --forward-max-prose: 1200px;
  --forward-max-wide: 1440px;   /* tables + dashboards */
}

/* ---- Dark theme (second pass) [brief; tertiary/disabled resolved] ---- */
[data-theme="dark"] {
  --forward-bg-canvas: #141311;
  --forward-surface: #1E1D1A;
  --forward-border-subtle: #2A2823;
  --forward-border-medium: #3C3831;
  --forward-text-primary: #F0EDE5;
  --forward-text-secondary: #B8B4A8;
  --forward-text-tertiary: #8A8578;   /* [resolved] */
  --forward-text-disabled: #6B675E;   /* [resolved] */
  /* Trust stays teal (law); brightened for legibility on the dark trust-soft. */
  --forward-trust: #4E9A9A;            /* [resolved] */
  --forward-trust-soft: #1C2E2E;       /* [resolved] */
  /* Semantic pairs for dark: dark tinted soft backgrounds + lightened foregrounds,
     so status badges / banners stay legible in dark mode. [resolved] */
  --forward-warning: #E4A94D;          /* [resolved] */
  --forward-warning-soft: #302711;     /* [resolved] */
  --forward-success: #7FB183;          /* [resolved] */
  --forward-success-soft: #182A1C;     /* [resolved] */
  --forward-danger: #E0685C;           /* [resolved] */
  --forward-danger-soft: #301D1A;      /* [resolved] */
  --forward-info: #7AA3C9;             /* [resolved] */
  --forward-info-soft: #172530;        /* [resolved] */
  --forward-elev-1: 0 1px 2px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.30);   /* [resolved] */
  --forward-elev-2: 0 4px 12px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.45); /* [resolved] */
}

/* Compact density: apply data-density="compact" on any subtree (e.g. dense tables). */
[data-density="compact"] { --forward-density-scale: 0.85; }

/* Reduced motion [brief]: replace all motion with instant transitions. */
@media (prefers-reduced-motion: reduce) {
  :root { --forward-motion-enter: 0ms linear; --forward-motion-exit: 0ms linear; }
}

/* Base application surface. Wrap the app root so tokens resolve and the canvas
   + default type are applied. */
.forward-root {
  background: var(--forward-bg-canvas);
  color: var(--forward-text-primary);
  font: var(--forward-text-body);
  font-feature-settings: "tnum" 1;   /* tabular numerals for aligned numeric columns */
}

/* Keyboard focus is always visible; never outline:none. */
.forward-root :focus-visible {
  outline: none;
  box-shadow: var(--forward-focus-ring);
}