/* =============================================================================
 * Finance Reps — Brand Tokens
 * =============================================================================
 * Drop-in CSS custom properties extracted from the Finance Reps app V6.9.39.
 * Source: FINANCE_REPS_BRAND + V612_PALETTE + REPS_TOKENS constants in the
 * canonical JSX source-of-truth.
 *
 * Usage: include this file globally; reference tokens as var(--fr-cream) etc.
 *
 * The full palette is intentionally minimal — the brand reads as editorial,
 * not SaaS, so the website should resist the urge to add accent colours
 * beyond what's defined here. Signal blue is the only colour beyond
 * cream + graphite + warm stone family. Use it sparingly.
 * ============================================================================= */

:root {
  /* ---------- Surface (light mode) ---------- */
  --fr-cream:              #FBF9F4;  /* Primary page background — warm cream, NOT white */
  --fr-cream-deep:         #F4EFE5;  /* Subtle deeper cream — section shifts, icon tile gradient */
  --fr-white:              #FFFFFF;  /* Elevated cards ONLY — never page background */

  /* ---------- Text (light mode) ---------- */
  --fr-graphite:           #1C1917;  /* Primary text + serif marks — true ink, not pure black */
  --fr-text-secondary:     #57534E;  /* Subheads, lower-emphasis body */
  --fr-text-tertiary:      #78716C;  /* Captions, tagline, footer notes */

  /* ---------- Borders + dividers (light mode) ---------- */
  --fr-stone-subtle:       #E7E5E4;  /* Subtle dividers (Tailwind stone-200 equivalent) */
  --fr-stone-warm:         #D6D3D1;  /* Default borders / hairlines / icon inset frame (stone-300) */

  /* ---------- The accent — signal blue ---------- */
  --fr-signal-blue:        #2563EB;  /* Wordmark ▌ block · primary buttons · primary links */
  --fr-signal-blue-deep:   #1D4ED8;  /* Hover / pressed state for signal-blue */
  --fr-signal-blue-tint:   #EFF6FF;  /* Subtle blue background tints — use sparingly */

  /* ---------- The slate family (Reps surface accent) ---------- */
  /* Used in the app for the Reps/Applications track family — slate-600 + slate-900.
     A website probably doesn't need these; included for completeness. */
  --fr-slate:              #475569;  /* Reps surface accent (slate-600) */
  --fr-slate-deep:         #1E293B;  /* Reps surface deep companion (slate-900) */
  --fr-slate-tint:         #F1F5F9;  /* Slate-100 page surface for ApplicationsScreen */

  /* ---------- Status colours (rare on a marketing site) ---------- */
  --fr-ok-bg:              #DCFCE7;
  --fr-ok-fg:              #15803D;
  --fr-error-bg:           #FEE2E2;
  --fr-error-fg:           #B91C1C;

  /* ---------- Dark-mode tokens ---------- */
  /* These are set on :root so dark-mode declarations can reference them.
     The actual light/dark switch happens in the @media block below. */
  --fr-graphite-deep:           #0C0A09;  /* Page background in dark mode */
  --fr-graphite-card:           #1C1917;  /* Card surfaces in dark mode */
  --fr-graphite-card-subtle:    #161312;  /* Inset rows / subtle dark surface */
  --fr-graphite-border:         #3F3935;  /* Borders in dark mode */
  --fr-text-primary-dark:       #F5F5F4;  /* Primary text in dark mode */
  --fr-text-secondary-dark:     #D6D3D1;  /* Subheads in dark mode */
  --fr-text-tertiary-dark:      #A8A29E;  /* Captions in dark mode */
  --fr-signal-blue-dark:        #60A5FA;  /* Brighter signal-blue for contrast against graphite */
  --fr-warm-cream-foreground:   #F0E1C9;  /* Warm cream used as foreground tint in dark Foundations/Applications */

  /* ---------- Typography ---------- */
  --fr-serif: 'Crimson Pro', 'Source Serif Pro', 'Playfair Display', 'Caladea', 'DejaVu Serif', Georgia, 'Times New Roman', serif;
  --fr-sans:  -apple-system, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  --fr-mono:  ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  /* ---------- Surface tokens (semantic — what to use, not raw colour) ---------- */
  /* Prefer these in component styles; they map to colour tokens above.
     Means switching dark/light only changes a handful of tokens, not every
     style rule. */
  --fr-bg-page:            var(--fr-cream);
  --fr-bg-card:            var(--fr-white);
  --fr-bg-subtle:          var(--fr-cream);          /* Same as page bg by intent */
  --fr-text-primary:       var(--fr-graphite);
  --fr-border-default:     var(--fr-stone-warm);
  --fr-accent:             var(--fr-signal-blue);
  --fr-accent-hover:       var(--fr-signal-blue-deep);

  /* ---------- Radius ---------- */
  /* The app uses moderate radii — square-ish, editorial. Avoid pill shapes
     except on inline tag pills (and even then sparingly). */
  --fr-radius-sm:    4px;    /* Small inputs, tag pills */
  --fr-radius-md:    8px;    /* Buttons, cards */
  --fr-radius-lg:   12px;    /* Hero cards, large containers */
  --fr-radius-xl:   16px;    /* Large modal cards */
  --fr-radius-tile: 22.5%;   /* iOS icon squircle radius — apply only on web favicon previews if needed */

  /* ---------- Spacing scale ---------- */
  /* Generous on purpose — the brand reads as a publication, not a dashboard. */
  --fr-space-1:   4px;
  --fr-space-2:   8px;
  --fr-space-3:  12px;
  --fr-space-4:  16px;
  --fr-space-5:  20px;
  --fr-space-6:  24px;
  --fr-space-8:  32px;
  --fr-space-10: 40px;
  --fr-space-12: 48px;
  --fr-space-16: 64px;
  --fr-space-20: 80px;
  --fr-space-24: 96px;

  /* ---------- Type scale ---------- */
  /* Suggested type sizes; you can override per surface as long as you stay
     in the editorial family. */
  --fr-text-xs:   13px;    /* Caption / footer */
  --fr-text-sm:   14px;    /* Body small */
  --fr-text-base: 16px;    /* Body */
  --fr-text-lg:   18px;    /* Body lead */
  --fr-text-xl:   20px;    /* Subhead */
  --fr-text-2xl:  24px;    /* H3 */
  --fr-text-3xl:  32px;    /* H2 */
  --fr-text-4xl:  48px;    /* H1 */
  --fr-text-5xl:  64px;    /* Hero wordmark (small) */
  --fr-text-6xl:  96px;    /* Hero wordmark (large) */

  /* ---------- Line heights ---------- */
  --fr-leading-tight: 1.1;
  --fr-leading-snug:  1.3;
  --fr-leading-base:  1.5;
  --fr-leading-loose: 1.7;

  /* ---------- Letter spacing ---------- */
  /* Serif display sizes get slightly negative tracking for editorial feel. */
  --fr-tracking-tight:  -0.02em;
  --fr-tracking-snug:   -0.01em;
  --fr-tracking-normal:  0;

  /* ---------- Misc ---------- */
  --fr-max-prose: 720px;     /* Reading width for prose surfaces (Privacy / Terms / About) */
  --fr-max-page:  1280px;    /* Page max-width for grids / multi-column */
}

/* =============================================================================
 * Dark mode — automatic via prefers-color-scheme
 * ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --fr-bg-page:        var(--fr-graphite-deep);
    --fr-bg-card:        var(--fr-graphite-card);
    --fr-bg-subtle:      var(--fr-graphite-card-subtle);
    --fr-text-primary:   var(--fr-text-primary-dark);
    --fr-border-default: var(--fr-graphite-border);
    --fr-accent:         var(--fr-signal-blue-dark);
    --fr-accent-hover:   var(--fr-signal-blue);
  }
}

/* =============================================================================
 * Wordmark — `▌ Finance Reps`
 * =============================================================================
 * The canonical wordmark recipe. Drop the markup below directly:
 *
 *   <span class="fr-wordmark">
 *     <span class="fr-wordmark-block">▌</span>
 *     <span class="fr-wordmark-name">Finance Reps</span>
 *   </span>
 *
 * Default sizing is for header / nav use. For hero use, add a size modifier
 * (fr-wordmark--hero) or override font-size on the wrapper.
 * ============================================================================= */
.fr-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  font-family: var(--fr-serif);
  font-weight: 600;
  letter-spacing: var(--fr-tracking-snug);
  color: var(--fr-text-primary);
  font-size: var(--fr-text-xl);   /* default = nav / header size */
  line-height: 1.0;
  white-space: nowrap;
}
.fr-wordmark--hero {
  font-size: var(--fr-text-5xl);
  font-weight: 600;
  letter-spacing: var(--fr-tracking-tight);
}
.fr-wordmark--display {
  font-size: var(--fr-text-6xl);
  font-weight: 600;
  letter-spacing: var(--fr-tracking-tight);
}
.fr-wordmark-block {
  color: var(--fr-accent);    /* signal blue — light AND dark via the var */
  font-family: inherit;       /* block character has no inherent font; inherit serif sizing */
}
.fr-wordmark-name {
  color: inherit;
}

/* =============================================================================
 * Tagline
 * ============================================================================= */
.fr-tagline {
  font-family: var(--fr-sans);
  font-size: var(--fr-text-base);
  font-weight: 400;
  line-height: var(--fr-leading-snug);
  color: var(--fr-text-tertiary);
  letter-spacing: 0.01em;
}
.fr-tagline--hero {
  font-size: var(--fr-text-lg);
}

/* =============================================================================
 * Primary button — the only standard CTA pattern
 * =============================================================================
 * Editorial, not playful. 8px radius (square-ish). Signal-blue bg + white fg.
 * Sentence-case label. No emoji. No icon unless functional.
 * ============================================================================= */
.fr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fr-space-2);
  padding: var(--fr-space-3) var(--fr-space-5);
  border-radius: var(--fr-radius-md);
  border: 0;
  background: var(--fr-accent);
  color: var(--fr-white);
  font-family: var(--fr-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.0;
  cursor: pointer;
  transition: background 120ms ease;
  text-decoration: none;
}
.fr-button:hover { background: var(--fr-accent-hover); }
.fr-button:focus-visible {
  outline: 2px solid var(--fr-accent);
  outline-offset: 2px;
}

/* Secondary button — ghost / outline */
.fr-button--ghost {
  background: transparent;
  color: var(--fr-text-primary);
  border: 1px solid var(--fr-border-default);
}
.fr-button--ghost:hover {
  background: var(--fr-bg-subtle);
}

/* =============================================================================
 * Optional Tailwind compat layer
 * =============================================================================
 * If the website uses Tailwind, add these tokens to tailwind.config.js
 * theme.extend.colors to mirror the app's palette:
 *
 *   colors: {
 *     'fr-cream': '#FBF9F4',
 *     'fr-cream-deep': '#F4EFE5',
 *     'fr-graphite': '#1C1917',
 *     'fr-text-secondary': '#57534E',
 *     'fr-text-tertiary': '#78716C',
 *     'fr-stone-subtle': '#E7E5E4',
 *     'fr-stone-warm': '#D6D3D1',
 *     'fr-signal-blue': '#2563EB',
 *     'fr-signal-blue-deep': '#1D4ED8',
 *     'fr-signal-blue-tint': '#EFF6FF',
 *     'fr-slate': '#475569',
 *     'fr-slate-deep': '#1E293B',
 *   }
 * ============================================================================= */