/* ============================================================================
   Frontpagely — public/styles.css
   The single stylesheet the APP + ADMIN + AUDIT Preact surfaces link
   (<link rel="stylesheet" href="/styles.css">). Separate from marketing.css.

   The ported Preact+HTM components carry their OWN inline styles keyed on
   var(--...), so this file's job is to define the design tokens, the base
   reset, a few global typography utilities, and the one shared keyframe the
   running-state spinner icons reference. No component-specific rules live here.

   Tokens are copied VERBATIM from frontpagely-design-system/project/tokens/*.css
   (the authoritative source of truth). Brand hue = indigo-blue #2F46DB. Never
   pink. The score ramp is the only place color carries meaning.

   Token groups, in order:
     1. Fonts        (Google Fonts @import — Geist / Space Grotesk / Geist Mono)
     2. Colors       (gray scale, brand + hovers, surfaces, borders, text,
                      focus, status, honesty markers, score ramp)
     3. Typography   (font families, type scale, line heights, weights,
                      tracking, tabular figures) + utility roles
     4. Spacing      (4px base + density)
     5. Radius       (6 / 10 / 16 / full)
     6. Elevation    (5 cool-tinted shadow steps)
     7. Motion       (durations, easings, prefers-reduced-motion)
     8. Base reset   (mirrors tokens/base.css)
   ============================================================================ */


/* ====================================================================== *
   1. FONTS — loaded from Google Fonts CDN (verbatim from tokens/fonts.css)
   font-sans:    Geist        — clean geometric grotesk, the credible voice
   font-numeric: Space Grotesk — distinct display face for the SeenRate number
   font-mono:    Geist Mono   — schema/JSON-LD blocks, domains, raw responses
   NOTE: substituted from CDN. If you have licensed binaries, swap this @import
   for local @font-face rules pointing at the files.
 * ====================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');


/* ====================================================================== *
   2. COLORS  (verbatim from tokens/colors.css)
   Light-first. Roles are semantic so a dark theme is a value-swap (§1.3).
   Three saturated families only: BRAND (indigo-blue), STATUS, and the SCORE
   ramp. Everything else is a cool neutral gray. Never hardcode hex.
 * ====================================================================== */
:root {
  /* --- Neutral foundation: a slightly cool gray scale (§1.5) --- */
  --gray-50:  #F7F9FB;
  --gray-100: #F1F4F7;
  --gray-150: #E9EDF2;
  --gray-200: #E2E7EE;
  --gray-300: #D0D7E0;
  --gray-400: #AAB4C2;
  --gray-500: #828D9D;
  --gray-600: #5B6675;
  --gray-700: #3C4552;
  --gray-800: #262C36;
  --gray-900: #161A21;

  /* --- Brand: confident deep indigo-blue (trust, instrument, "front page").
         Maximally distant from SeenRank's pink. NOT used for the score ramp. --- */
  --color-brand:        #2F46DB;
  --color-brand-hover:  #2336B4;
  --color-brand-active: #1C2C95;
  --color-brand-subtle: #EEF1FD;  /* brand ~8% over near-white: selected rows, info banners */
  --color-brand-ghost:  #F6F8FE;  /* even lighter wash for hover rows */
  --color-on-brand:     #FFFFFF;

  /* --- Surfaces --- */
  --color-bg:         #FAFBFC;
  --color-surface:    #FFFFFF;
  --color-surface-2:  #F4F6F9;  /* nested / inset */
  --color-overlay:    rgba(22, 26, 33, 0.45); /* modal scrim */

  /* --- Lines --- */
  --color-border:        #E2E7EE;
  --color-border-strong: #D0D7E0;
  --color-border-faint:  #EDF0F4;

  /* --- Text --- */
  --color-text:        #161A21;  /* near-black cool, not pure black */
  --color-text-muted:  #5B6675;
  --color-text-subtle: #828D9D;  /* AA on white */
  --color-text-onfill: #FFFFFF;

  /* --- Focus --- */
  --color-focus-ring: #2F46DB;
  --focus-ring: 0 0 0 3px rgba(47, 70, 219, 0.35);

  /* --- Semantic: status --- */
  --color-success:     #15935A;
  --color-success-bg:  #E4F3EC;
  --color-warning:     #B5710E;   /* text-safe amber (AA on white) */
  --color-warning-bg:  #FCF1DF;
  --color-warning-mark:#E8A317;   /* brighter amber for dots/fills */
  --color-danger:      #CE3A2C;
  --color-danger-bg:   #FBEAE8;
  --color-info:        #2563C9;
  --color-info-bg:     #E7EFFB;

  /* --- Honesty markers (first-class, never fine print, §6.1) --- */
  /* Directional/simulated — a desaturated violet-slate that reads "asterisk",
     deliberately NOT success/danger. */
  --color-directional:    #6F6AA6;
  --color-directional-bg: #EDECF5;
  /* Low-confidence (N<5) — muted gray-blue, pairs with hatched/ghosted fills. */
  --color-low-confidence:    #7C879B;
  --color-low-confidence-bg: #EEF1F5;

  /* --- SeenRate score scale (poor → strong). Absolute ramp, independent of
         brand. A 52 is always the same color for every firm (methodology §5). --- */
  --score-poor:      #DA3B2C;  /* 0–24  */
  --score-fair:      #E58A22;  /* 25–49 */
  --score-good:      #8FAE2A;  /* 50–74  lime / yellow-green */
  --score-strong:    #15935A;  /* 75–100 */
  --score-track:     #E6EAF0;  /* gauge unfilled track */

  --score-poor-bg:   #FBEAE8;
  --score-fair-bg:   #FCF1E1;
  --score-good-bg:   #F1F4E1;
  --score-strong-bg: #E4F3EC;

  /* Continuous-ramp anchor stops for gauge arc interpolation (red→amber→green) */
  --score-ramp-0:   #DA3B2C;
  --score-ramp-25:  #E58A22;
  --score-ramp-50:  #C7B12B;
  --score-ramp-75:  #8FAE2A;
  --score-ramp-100: #15935A;
}


/* ====================================================================== *
   3. TYPOGRAPHY  (verbatim from tokens/typography.css)
   Sans = credible grotesk · Numeric = distinct display w/ tabular figures
   Mono = schema / JSON-LD / domains. Tabular figures mandatory on metrics so
   trend digits don't jitter.
 * ====================================================================== */
:root {
  --font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-numeric: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --text-display: 64px;  /* hero SeenRate number (56–72) */
  --text-h1:      30px;
  --text-h2:      22px;
  --text-h3:      18px;
  --text-body:    15px;
  --text-sm:      13.5px;
  --text-xs:      12px;

  /* Line heights */
  --leading-tight:   1.05;  /* display number */
  --leading-snug:    1.2;   /* headings */
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.65;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Tracking */
  --tracking-display: -0.02em;  /* tight on the hero number */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.06em;   /* uppercase labels / badges */

  /* Tabular figures helper value */
  --fonts-tabular: 'tnum' 1, 'lnum' 1; /* @kind other */
}

/* Utility roles consumers can apply directly */
.fp-display {
  font-family: var(--font-numeric);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-feature-settings: var(--fonts-tabular);
}
.fp-numeric { font-family: var(--font-numeric); font-feature-settings: var(--fonts-tabular); }
.fp-mono    { font-family: var(--font-mono); }
.fp-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}


/* ====================================================================== *
   4. SPACING  (verbatim from tokens/spacing.css) — 4px base (§2.3)
 * ====================================================================== */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;   /* default card padding */
  --space-6:  32px;   /* section gap */
  --space-8:  48px;
  --space-10: 64px;

  --card-pad:    var(--space-5);
  --section-gap: var(--space-6);

  /* Density: comfortable on customer surfaces, compact on admin tables (§1.4) */
  --row-height-comfortable: 52px;
  --row-height-compact:     36px;
  --control-height:         40px;   /* buttons, inputs (comfortable) */
  --control-height-sm:      32px;
}


/* ====================================================================== *
   5. RADIUS  (verbatim from tokens/radius.css) (§2.4)
 * ====================================================================== */
:root {
  --radius-sm:   6px;    /* inputs, chips */
  --radius-md:   10px;   /* cards, buttons */
  --radius-lg:   16px;   /* hero panels, modals */
  --radius-full: 9999px; /* pills, gauge caps, avatars */
}


/* ====================================================================== *
   6. ELEVATION  (verbatim from tokens/elevation.css) (§2.5)
   Shadows are SOFT and low-contrast (cool, not black) to preserve the
   calm-instrument feel. Borders do most of the separation work; shadow is
   reserved for true layering.
 * ====================================================================== */
:root {
  --elev-0: none;                                            /* flush — border only */
  --elev-1: 0 1px 2px rgba(28, 42, 92, 0.06),
            0 1px 1px rgba(28, 42, 92, 0.04);                /* resting card */
  --elev-2: 0 4px 12px rgba(28, 42, 92, 0.08),
            0 1px 3px rgba(28, 42, 92, 0.06);                /* raised: hover, popover, dropdown */
  --elev-3: 0 16px 40px rgba(20, 30, 66, 0.16),
            0 4px 12px rgba(20, 30, 66, 0.10);               /* modal / dialog / sticky panel */
  --elev-toast: 0 10px 30px rgba(20, 30, 66, 0.22),
                0 2px 8px rgba(20, 30, 66, 0.14);            /* toasts / alert banners */
}


/* ====================================================================== *
   7. MOTION  (verbatim from tokens/motion.css) (§2.6)
   Functional everywhere; the SeenRate gauge arc-fill + number count-up on
   first reveal is the ONE moment of delight. Respect prefers-reduced-motion.
 * ====================================================================== */
:root {
  --motion-fast: 120ms;  /* @kind other */
  --motion-base: 200ms;  /* @kind other */
  --motion-slow: 400ms;  /* @kind other */

  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */ /* ease-out entrances */
  --ease-in-out:   cubic-bezier(0.45, 0, 0.40, 1);      /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;  /* @kind other */
    --motion-base: 0ms;  /* @kind other */
    --motion-slow: 0ms;  /* @kind other */
  }
}


/* ====================================================================== *
   8. BASE RESET  (mirrors tokens/base.css) — resets + ergonomic defaults
   layered on the tokens above.
 * ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }

a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-hover); }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

::selection { background: var(--color-brand-subtle); }


/* ====================================================================== *
   Shared keyframe — the running-run spinner.
   The ui_kit index.html shells declare this inline; the ported app/admin/audit
   Preact components reference `animation: fp-spin 0.9s linear infinite` on the
   `rerun`/`loader` icon (AppShell, AuditFlow, RunsScreen), so the shared
   stylesheet provides it once. Collapses under prefers-reduced-motion.
 * ====================================================================== */
@keyframes fp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  [style*="fp-spin"] { animation: none !important; }
}