/* ==========================================================================
   rs-tokens.css — Rate Search design tokens
   ==========================================================================
   Every value the Rate Search modules use lives here. Components never
   hard-code a colour, radius, shadow or duration; they read an --rs-* token.

   The tokens are DERIVED from the app-wide palette in styles.css, so dark
   mode, the Hub Group green and any future brand change flow through with no
   edits in this file. Nothing here invents a new brand colour.

   Scope: .rs-page. Nothing leaks into other tabs.
   ========================================================================== */

.rs-page {
  /* ── Colour ─────────────────────────────────────────────────────────── */
  --rs-accent: var(--accent);
  --rs-accent-hover: var(--accent-hover);
  --rs-accent-soft: var(--accent-soft);
  --rs-accent-tint: var(--accent-tint);
  --rs-accent-border: var(--accent-border);

  --rs-bg: var(--surface-1);
  --rs-card: var(--surface);
  --rs-card-sunken: var(--surface-2);
  --rs-card-raised: var(--surface);

  --rs-border: var(--border);
  --rs-border-strong: var(--border-strong);
  --rs-border-hair: var(--border-light, var(--border));

  /* Loading skeleton. Translucent on purpose: the skeleton sits on
     --surface-2 cards AND on the accent-soft Suggested Price panel, and a
     solid --surface-2 fill (the old value) was invisible on the former. */
  --rs-skel-base: rgba(16, 32, 26, 0.07);
  --rs-skel-hi: rgba(16, 32, 26, 0.16);

  --rs-text: var(--text-primary);
  --rs-text-soft: var(--text-secondary, var(--text-primary));
  --rs-text-muted: var(--text-muted);

  --rs-pos: var(--pos);
  --rs-pos-soft: var(--pos-soft);
  --rs-neg: var(--neg);
  --rs-neg-soft: var(--neg-soft);

  /* ── Spacing (4px base) ─────────────────────────────────────────────── */
  --rs-1: 4px;
  --rs-2: 8px;
  --rs-3: 12px;
  --rs-4: 16px;
  --rs-5: 20px;
  --rs-6: 24px;
  --rs-8: 32px;
  --rs-10: 40px;

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --rs-r-xs: 6px;
  --rs-r-sm: 8px;
  --rs-r: 12px;
  --rs-r-lg: 16px;
  --rs-r-pill: 999px;

  /* ── Elevation. Three steps only: flat, resting, hero. ──────────────── */
  --rs-sh-0: none;
  --rs-sh-1: 0 1px 2px rgba(16, 32, 26, 0.05);
  --rs-sh-2: 0 4px 14px rgba(16, 32, 26, 0.07);
  --rs-sh-hero: 0 10px 32px rgba(16, 32, 26, 0.09);

  /* ── Type ───────────────────────────────────────────────────────────── */
  --rs-fs-micro: 0.66rem;   /* field + section micro-labels */
  --rs-fs-xs: 0.74rem;      /* meta, helper text */
  --rs-fs-sm: 0.82rem;      /* body */
  --rs-fs-md: 0.9rem;       /* card titles */
  --rs-fs-lg: 1.05rem;      /* section titles */
  --rs-fs-xl: 1.3rem;       /* secondary figures */
  --rs-fs-hero: 2.85rem;    /* the one number that matters */

  --rs-lh-tight: 1.1;
  --rs-lh: 1.45;

  --rs-fw-mid: 600;
  --rs-fw-bold: 700;
  --rs-fw-black: 800;

  --rs-track-label: 0.06em; /* micro-label tracking */

  /* ── Motion. Enterprise-subtle: nothing over 450ms. ──────────────────── */
  --rs-dur-fast: 120ms;
  --rs-dur: 200ms;
  --rs-dur-slow: 420ms;
  --rs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rs-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Controls ───────────────────────────────────────────────────────── */
  --rs-field-h: 44px;       /* primary lane fields */
  --rs-field-h-sm: 36px;    /* optional / secondary fields */
  --rs-focus-ring: 0 0 0 3px var(--rs-accent-soft);
}

/* Dark theme needs heavier shadows to read at all; the palette itself is
   already handled by the global [data-theme="dark"] block in styles.css. */
[data-theme="dark"] .rs-page {
  --rs-sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --rs-sh-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --rs-sh-hero: 0 10px 32px rgba(0, 0, 0, 0.5);
  --rs-card: var(--surface-2);
  --rs-card-sunken: var(--surface-1);
  --rs-skel-base: rgba(255, 255, 255, 0.06);
  --rs-skel-hi: rgba(255, 255, 255, 0.15);
}