/* =============================================================================
   Capibrain · Shared styles
   =============================================================================

   This file is the foundation that every Capibrain page links to. It declares
   the design tokens (colours, type, spacing, radii, motion) and a small set
   of universal component base classes (cards, buttons, pills, tooltips).

   ── Authority ──────────────────────────────────────────────────────────────
   Source of truth: /DESIGN_SYSTEM.md at the project root. If anything in this
   file contradicts that document, the document wins and this file is wrong.

   ── What's in here ─────────────────────────────────────────────────────────
   1. Geist font import (Google Fonts)
   2. CSS custom properties — tokens at :root
   3. Reset and base elements (html, body, *, ::selection, scrollbars)
   4. Universal component classes (.card, .btn, .pill, .tooltip)
   5. Global motion preferences (prefers-reduced-motion)

   ── What's deliberately NOT in here ────────────────────────────────────────
   - Page-specific layout (header, sidebar, grid templates)
   - Tool-specific styling (mortgage optimiser, glossary popups)
   - Responsive breakpoints (each page decides its own)

   Pages that need page-level layout add it on top of this in their own
   <style> block or page-specific CSS file.

   ── How to use ─────────────────────────────────────────────────────────────
   <link rel="stylesheet" href="/shared/styles.css" />

   That's it. Everything inside this file is automatic from there. Geist loads
   from Google Fonts, tokens are available as CSS variables, and the base
   classes can be used directly.

   ── Versioning ─────────────────────────────────────────────────────────────
   v1 · 2026-05-05 · Initial extraction from the design system doc.

   ============================================================================= */


/* ----------------------------------------------------------------------------
   1. Fonts
   ----------------------------------------------------------------------------
   Geist Sans for all UI text. Geist Mono for numbers and code.

   Loaded with display=swap so text renders immediately in the system fallback
   while Geist downloads. Avoids invisible text during font load (FOIT).

   Specific weights: 400 (body), 500 (medium emphasis), 600 (subtle headings),
   700 (titles), 800 (display). We import only what we use to keep the font
   payload small.
   ---------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;700&display=swap');


/* ----------------------------------------------------------------------------
   2. Tokens — design system variables
   ----------------------------------------------------------------------------
   These are the only values allowed in production code. Pages MUST reference
   tokens, not raw hex/px values. If you find yourself wanting `#4ade9a`
   inline, use `var(--accent)` instead.

   See DESIGN_SYSTEM.md §3, §4, §5, §6 for rationale.
   ---------------------------------------------------------------------------- */

:root {
  /* === Surfaces === */
  --bg:           #0f1117;  /* page background */
  --surface:      #181c27;  /* top bar, rail, footer — chrome surfaces */
  --card:         #1e2235;  /* cards, raised surfaces */
  --card-raised:  #252a3f;  /* hover/active state on cards */

  /* === Borders === */
  --border:        #2a2f45; /* default borders, dividers */
  --border-strong: #3a4060; /* focus rings, active states */

  /* === Text === */
  --text:     #e6e9f0;  /* primary text (headings, body) */
  --text-dim: #b8bdcc;  /* secondary text, descriptions */
  --muted:    #8a92a3;  /* captions, labels, placeholders */

  /* === Accents ===
     Each accent has a "dimmed" variant for subtle backgrounds (e.g. a mint
     panel behind a positive metric). Dimmed variants are dark tints, not
     transparency — they composite cleanly over --bg. */
  --accent:     #4ade9a;  /* mint — primary actions, positive, "live" */
  --accent-hover: #5fe4a4; /* mint slightly lighter — primary button hover */
  --accent-dim: #1a3a2a;  /* mint dimmed */
  --warn:       #fbbf24;  /* amber — caution */
  --warn-dim:   #2d2310;  /* amber dimmed */
  --danger:     #f87171;  /* red — errors, blocked */
  --danger-dim: #3a1a1a;  /* red dimmed */
  --blue:       #60a5fa;  /* blue — informational */
  --blue-dim:   #0c2a3a;  /* blue dimmed */
  --highlight:  #c084fc;  /* magenta — special emphasis (max 1-2 per screen) */

  /* === Effects === */
  --accent-glow: rgba(74, 222, 154, 0.15);  /* logo glow, button focus aura */

  /* === Typography === */
  --font-sans: 'Geist', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale. clamp() values let display + headline scale with viewport;
     the smaller sizes are fixed because they shouldn't scale (a 14px body
     on a 320px phone reads identically to a 14px body on a 4K monitor). */
  --fs-display:  clamp(36px, 6vw, 64px);   /* marketing hero only */
  --fs-headline: clamp(22px, 3vw, 32px);   /* section/page titles */
  --fs-title:    17px;                     /* card/panel titles */
  --fs-body:     14px;                     /* body copy */
  --fs-caption:  12px;                     /* help text, meta */
  --fs-micro:    10px;                     /* labels, eyebrows, tags */

  /* === Spacing — dense scale === */
  /* The default scale. Used by the platform shell and all tools. Base unit
     is --space-4 (16px). Card padding, card gaps, and section spacing are
     all multiples of this base. */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;   /* base */
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* === Spacing — comfortable scale === */
  /* Used only on the marketing landing and (future) /learn content. These
     are dedicated tokens (not multiples of --space-4) because the rhythm of
     editorial copy is intentionally different from dashboard density. */
  --space-comfortable-section:    80px;  /* between landing sections */
  --space-comfortable-paragraph:  24px;  /* between paragraphs */
  --space-comfortable-card-pad:   28px;  /* card padding on landing */
  --space-comfortable-grid-gap:   20px;  /* between cards on landing */

  /* === Corner radii === */
  --radius-sharp: 0;       /* chrome (top bar, rail, bottom nav) */
  --radius-sm:    6px;     /* buttons, badges, small inputs */
  --radius-md:    10px;    /* default for cards */
  --radius-lg:    14px;    /* large cards */
  --radius-pill:  9999px;  /* pill buttons, status pills */

  /* === Motion === */
  /* Default easing is Material's "fast out, slow in" — feels snappy without
     being jarring. The bounce easing has a slight overshoot for entrance
     animations (the hero blocks). Linear is reserved for the ticker scroll
     and indeterminate progress only. */
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce:  cubic-bezier(0.34, 1.3, 0.64, 1);
  --duration-fast:  150ms;  /* default for hovers, state changes */
  --duration-slow:  700ms;  /* entrance/build animations */
  --duration-ambient: 4000ms; /* breathing, ambient motion */
}


/* ----------------------------------------------------------------------------
   3. Reset and base elements
   ----------------------------------------------------------------------------
   Lightweight reset — just the essentials. Box sizing inherited everywhere.
   System defaults for forms (so they feel native on each platform).
   ---------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  /* Use both vh and dvh — dvh respects mobile browsers' dynamic chrome
     (URL bar collapse on iOS Safari). vh fallback for older browsers. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Smoother font rendering on macOS and iOS. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Default body type is body size with comfortable line-height. */
  font-size: var(--fs-body);
  line-height: 1.55;
}

/* Selection colour — mint background, dark text. A small but consistent
   moment of brand presence whenever the user highlights something. */
::selection {
  background: var(--accent);
  color: var(--bg);
}

/* Default headings. Pages override per their own type scale, but a sensible
   base prevents browser defaults (which are usually too big and bold). */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

/* Default link styling — used in body copy. Pages with custom navigation
   override per-element. */
a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--easing-default);
}
a:hover { opacity: 0.85; }

/* Buttons inherit font from the page (browsers don't by default). Reset is
   minimal — actual button styling comes from .btn classes below. */
button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Form inputs inherit too, for the same reason. */
input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Custom scrollbar — subtle but on-brand. Webkit only (Firefox uses native
   styling). The thumb is dim by default and brightens on hover. */
::-webkit-scrollbar      { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }


/* ----------------------------------------------------------------------------
   4. Numbers — always monospace
   ----------------------------------------------------------------------------
   Per DESIGN_SYSTEM.md §4.3, numerical values always use the mono font.
   This class is the convenience wrapper for inline use.

   Usage:
     <span class="num">$3,200</span>
     "your monthly bill is <span class="num">$3,200</span>"
   ---------------------------------------------------------------------------- */

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;  /* equal-width digits for alignment */
}


/* ----------------------------------------------------------------------------
   5. Labels and eyebrows
   ----------------------------------------------------------------------------
   Tiny uppercase text used for section labels, eyebrow text above titles,
   metric labels above numbers. The letter-spacing gives them visual rhythm.
   ---------------------------------------------------------------------------- */

.label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}


/* ----------------------------------------------------------------------------
   6. Cards
   ----------------------------------------------------------------------------
   The most-used component. Three sizes:

   .card     — default; --space-4 padding, --radius-md radius
   .card-lg  — feature cards on the landing; --space-5 padding, --radius-lg
   .card-sm  — tight cards inside panels; --space-3 padding

   Add .card.interactive for cards that should respond to hover. Most cards
   on the platform are NOT interactive (they're just containers); save the
   hover state for cards that actually navigate or expand on click.
   ---------------------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.card-lg { padding: var(--space-5); border-radius: var(--radius-lg); }
.card-sm { padding: var(--space-3); }

.card.interactive {
  cursor: pointer;
  transition: transform var(--duration-fast) var(--easing-default),
              border-color var(--duration-fast) var(--easing-default),
              background var(--duration-fast) var(--easing-default);
}
.card.interactive:hover {
  border-color: var(--accent);
  background: var(--card-raised);
  transform: translateY(-1px);
}


/* ----------------------------------------------------------------------------
   7. Buttons
   ----------------------------------------------------------------------------
   Three variants:

   .btn-primary   — mint, dark text. The main "do this thing" CTA.
   .btn-secondary — card-coloured with border. Less prominent action.
   .btn-ghost     — transparent. For tertiary actions (cancel, close).

   Sizes:
   .btn-sm — smaller padding, micro font
   .btn (default) — body font, comfortable padding
   .btn-lg — bigger, used for hero CTAs

   Don't combine .btn-primary with .btn-secondary etc. Pick one variant per
   button.
   ---------------------------------------------------------------------------- */

.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--duration-fast) var(--easing-default),
              border-color var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default);
  white-space: nowrap;
  /* Prevent iOS Safari's tap highlight grey-out, which clashes with our
     own hover/active states. */
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
}
.btn-primary:hover {
  /* Slightly lighter mint on hover — perceptible without being garish. */
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--card-raised);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
}
.btn-ghost:hover {
  background: var(--card);
  color: var(--text);
}

.btn-sm {
  font-size: var(--fs-caption);
  padding: 6px 10px;
}
.btn-lg {
  font-size: var(--fs-title);  /* 17px — matches card titles, feels CTA-prominent */
  padding: 12px 22px;
  border-radius: var(--radius-md);
}

/* Disabled state — applies to any button variant. */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ----------------------------------------------------------------------------
   8. Status pills
   ----------------------------------------------------------------------------
   Small uppercase pills for status indicators ("Live", "Soon", "Beta", "New").
   Always border + transparent background — never filled. The variant classes
   set the colour.

   Usage:
     <span class="pill pill-live">Live</span>
     <span class="pill pill-soon">Soon</span>
   ---------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid;
  line-height: 1;
  background: transparent;
}
.pill-live { color: var(--accent); border-color: var(--accent); }
.pill-soon { color: var(--muted); border-color: var(--border); }
.pill-beta { color: var(--accent); border-color: var(--accent); }
.pill-new  { color: var(--highlight); border-color: var(--highlight); }


/* ----------------------------------------------------------------------------
   9. Tooltips
   ----------------------------------------------------------------------------
   Pure CSS tooltips — no JS dependency. Works for the rail icon labels and
   anywhere else we want hover hints.

   Usage (on a parent that has a child .tooltip):
     <button class="has-tooltip">
       <span class="icon">...</span>
       <span class="tooltip">App name</span>
     </button>

   The 600ms delay before fade-in prevents the tooltip from flashing during
   quick mouse-throughs. Once visible, fade-out is instant.
   ---------------------------------------------------------------------------- */

.tooltip {
  position: absolute;
  background: var(--card-raised);
  color: var(--text);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  /* Fade out instantly on mouseleave. The hover state below adds the
     600ms delay before fade-in to suppress noise from quick mouse-throughs. */
  transition: opacity var(--duration-fast) var(--easing-default);
}
.has-tooltip {
  position: relative;
}
.has-tooltip:hover .tooltip,
.has-tooltip:focus-visible .tooltip {
  opacity: 1;
  /* On hover, wait 600ms before fading the tooltip in. This filters out
     incidental mouseovers (e.g. mouse-throughs across the rail) so the
     tooltip only appears when the user has actually paused on a control. */
  transition: opacity var(--duration-fast) 600ms var(--easing-default);
}


/* ----------------------------------------------------------------------------
   10. Focus rings
   ----------------------------------------------------------------------------
   Every interactive element gets a visible focus ring on keyboard focus.
   Uses :focus-visible so it only appears for keyboard users — mouse clicks
   don't trigger it (which would be visual noise).

   The ring is offset slightly so it doesn't sit on the element's border.
   ---------------------------------------------------------------------------- */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}


/* ----------------------------------------------------------------------------
   11. Reduced motion
   ----------------------------------------------------------------------------
   Users with motion sensitivity (vestibular disorders, focus difficulties)
   get instantaneous transitions instead of animations. Doesn't disable
   transforms — state still changes — just makes them happen instantly.

   This is a hard accessibility requirement and applies globally.
   ---------------------------------------------------------------------------- */

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


/* ----------------------------------------------------------------------------
   12. Print styles
   ----------------------------------------------------------------------------
   Minimum viable print: black text on white. Pages with print-specific
   layouts (the mortgage tool's PDF export) override per-page.

   This is the safety net — if a page doesn't define print rules, at least
   the output is legible on paper.
   ---------------------------------------------------------------------------- */

@media print {
  html, body {
    background: white !important;
    color: black !important;
  }
  /* Hide chrome by default — most pages have a sticky header that
     shouldn't appear in printed output. Pages that want to print the
     header can override .header { display: block !important }. */
  .no-print { display: none !important; }
}