/* ============================================================
   Rate Pulse — design tokens & base
   Ported from the Claude Design prototype (price-insights/styles.css).
   Loaded first, app-wide, so per-feature CSS can migrate onto these vars.
   Type:  Space Grotesk (display) · Hanken Grotesk (UI) · Space Mono (figures)
   ============================================================ */

:root {
  /* --- warm cream neutrals (Vio #FCFCF0) --- */
  --paper:      oklch(0.990 0.012 106);  /* app background */
  --paper-2:    oklch(0.975 0.014 100);  /* sunken panels  */
  --surface:    oklch(1 0 0);            /* cards          */
  --ink:        oklch(0.24 0.012 300);   /* primary text   */
  --ink-2:      oklch(0.46 0.014 300);   /* secondary text */
  --ink-3:      oklch(0.62 0.012 300);   /* muted / labels */
  --line:       oklch(0.915 0.008 300);  /* hairline       */
  --line-2:     oklch(0.865 0.012 300);  /* stronger line  */

  /* --- Vio violet signal (brand) --- */
  --violet:     #6C30CC;                 /* Vio primary    */
  --violet-600: #5C26B2;                 /* hover          */
  --violet-700: #480C78;                 /* deep           */
  --violet-soft:#E7DBFA;                 /* fill           */
  --violet-tint:#F4EFFD;                 /* faint fill     */
  --violet-ink: #4C1A9E;                 /* text on light  */
  --lilac:      #9C60FC;                 /* Vio secondary  */

  /* --- semantic data palette (matched chroma) --- */
  --emerald:    oklch(0.60 0.15 156);    /* below market / opportunity */
  --emerald-soft: oklch(0.95 0.05 156);
  --coral:      oklch(0.60 0.20 25);     /* above market / warning */
  --coral-soft: oklch(0.95 0.045 25);
  --amber:      oklch(0.70 0.14 62);     /* competitors */
  --amber-soft: oklch(0.95 0.05 70);

  /* --- elevation --- */
  --sh-1: 0 1px 2px oklch(0.3 0.02 60 / 0.06), 0 1px 1px oklch(0.3 0.02 60 / 0.04);
  --sh-2: 0 2px 4px oklch(0.3 0.02 60 / 0.05), 0 6px 16px oklch(0.3 0.02 60 / 0.07);
  --sh-3: 0 8px 24px oklch(0.3 0.02 60 / 0.10), 0 24px 56px oklch(0.3 0.02 60 / 0.10);
  --sh-violet: 0 6px 20px oklch(0.52 0.235 292 / 0.28);

  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --maxw: 1240px;

  /* font stacks */
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

/* Alpine.js: hide cloaked elements until Alpine initializes. */
[x-cloak] { display: none !important; }

/* Shared brand wordmark — "Rate Pulse" with a violet accent. */
.rp-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.rp-wordmark .rp-accent { color: var(--violet); }

/* Default type — feature CSS that sets its own body font still overrides this. */
body { font-family: var(--font-ui); }
h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* --- reusable bits (scoped to opt-in classes; safe app-wide) --- */
.rp-card,
.card.rp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }

@keyframes rp-fade-up {
  from { transform: translateY(12px); opacity: 0.001; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes rp-fade {
  from { opacity: 0.001; }
  to   { opacity: 1; }
}
@keyframes rp-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes rp-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.fade-up { animation: rp-fade-up 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.fade-in { animation: rp-fade 0.4s ease both; }

/* loading skeleton for lazy-loaded sections */
.rp-skeleton {
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--line) 37%, var(--paper-2) 63%);
  background-size: 800px 100%;
  animation: rp-shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; }
}