/* web.css: ReelRent v1 tokens as CSS custom properties, for the professional web portal
   (and the Next.js/Vercel renter site). Same values as theme.ts. Do NOT reuse old portal CSS.
   Fonts: load from Google Fonts or Fontsource, e.g.
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700..800&family=Plus+Jakarta+Sans:wght@500..800&display=swap" rel="stylesheet">
   or `npm i @fontsource-variable/bricolage-grotesque @fontsource-variable/plus-jakarta-sans`. */
:root {
  /* brand (the only values taken from the old repo) */
  --rr-plum: #48233F; --rr-coral: #F77B72; --rr-cream: #FFF9F3; --rr-white: #FFFFFF;
  /* ramps */
  --rr-plum-900:#2A1425; --rr-plum-800:#3A1C33; --rr-plum-700:#48233F; --rr-plum-500:#6B4762; --rr-plum-300:#A88DA0; --rr-plum-200:#D9CBD4; --rr-plum-100:#EADDE5; --rr-plum-50:#F5EEF2;
  --rr-coral-800:#B23C35; --rr-coral-700:#C8473F; --rr-coral-600:#E8645B; --rr-coral-500:#F77B72; --rr-coral-300:#FBB3AD; --rr-coral-100:#FEE4E1; --rr-coral-50:#FFF1EF;
  --rr-cream-100:#FFF9F3; --rr-cream-200:#F9EFE6; --rr-cream-300:#F1E4D9;
  --rr-ink-900:#30232C; --rr-ink-600:#6F6269; --rr-ink-400:#81757C; --rr-line:#EEE6E8;
  --rr-success:#38644F; --rr-success-tint:#E6F0EA; --rr-win-tint:#F1F7F3; --rr-danger:#A13E4A; --rr-danger-tint:#F6E4E6; --rr-favorite:#A84360; --rr-media:#29222A;
  --rr-scrim: rgba(37,19,33,.40);
  /* roles */
  --rr-bg: var(--rr-cream-100); --rr-surface: var(--rr-white); --rr-sunken: var(--rr-cream-200);
  --rr-text: var(--rr-ink-900); --rr-text-2: var(--rr-ink-600); --rr-text-brand: var(--rr-plum-700);
  --rr-on-coral: var(--rr-plum-700); /* never white on coral */
  --rr-link: var(--rr-coral-700);
  /* type */
  --rr-font-display: "Bricolage Grotesque", "Bricolage Grotesque Variable", system-ui, sans-serif;
  --rr-font-ui: "Plus Jakarta Sans", "Plus Jakarta Sans Variable", system-ui, sans-serif;
  --rr-display: 800 40px/42px var(--rr-font-display);
  --rr-title1: 800 28px/31px var(--rr-font-display);
  --rr-title2: 700 22px/26px var(--rr-font-display);
  --rr-headline: 700 17px/22px var(--rr-font-ui);
  --rr-body: 500 15px/22px var(--rr-font-ui);
  --rr-callout: 500 14px/20px var(--rr-font-ui);
  --rr-label: 600 14px/16px var(--rr-font-ui);
  --rr-caption: 600 12px/16px var(--rr-font-ui);
  --rr-overline: 800 11px/13px var(--rr-font-ui); /* + letter-spacing:.08em; text-transform:uppercase */
  /* portal-specific type */
  --rr-page-title: 800 30px/1 var(--rr-font-display);
  --rr-kpi: 800 30px/1 var(--rr-font-display);
  --rr-table-head: 700 11px/1 var(--rr-font-ui); /* uppercase, .06em */
  --rr-table-cell: 600 13.5px/1.2 var(--rr-font-ui);
  /* space / radius */
  --rr-space-1:4px; --rr-space-2:8px; --rr-space-3:12px; --rr-space-4:16px; --rr-space-5:20px; --rr-space-6:24px; --rr-space-8:32px; --rr-space-10:40px; --rr-space-14:56px;
  --rr-radius-xs:8px; --rr-radius-sm:12px; --rr-radius-input:14px; --rr-radius-md:18px; --rr-radius-lg:24px; --rr-radius-xl:28px; --rr-radius-pill:999px;
  /* elevation: plum shadows, never black */
  --rr-e1: 0 1px 2px rgba(72,35,63,.06), 0 2px 8px rgba(72,35,63,.06);
  --rr-e2: 0 8px 24px rgba(72,35,63,.10);
  --rr-e3: 0 20px 40px rgba(72,35,63,.16);
  --rr-glow: 0 14px 28px rgba(247,123,114,.38);
  --rr-glass-light: rgba(255,249,243,.78); /* + backdrop-filter: blur(20px) saturate(1.4) */
  --rr-glass-dark: rgba(42,20,37,.38);     /* + backdrop-filter: blur(16px) */
  /* motion */
  --rr-ease-out: cubic-bezier(.22,1,.36,1);
  --rr-dur-fast: 120ms; --rr-dur-base: 180ms; --rr-dur-slow: 300ms;
  /* portal layout */
  --rr-rail-w: 232px; --rr-rail-w-collapsed: 72px; --rr-main-pad: 32px; --rr-side-col: 340px; --rr-grid-gap: 16px; --rr-table-row: 56px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --rr-dur-fast: 0ms; --rr-dur-base: 150ms; --rr-dur-slow: 150ms; }
}

/* Minimal reference classes (portal). Rename to your CSS-module / Tailwind conventions. */
.rr-btn { height: 44px; padding: 0 18px; border-radius: var(--rr-radius-pill); font: 700 15px/1 var(--rr-font-ui); display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; transition: transform var(--rr-dur-fast) var(--rr-ease-out), background-color var(--rr-dur-base); }
.rr-btn:active { transform: scale(.97); }
.rr-btn:focus-visible { outline: 3px solid var(--rr-coral-300); outline-offset: 2px; }
.rr-btn--accent { background: var(--rr-coral-500); color: var(--rr-on-coral); box-shadow: var(--rr-glow); } /* one per page */
.rr-btn--primary { background: var(--rr-plum-700); color: var(--rr-cream-100); }
.rr-btn--secondary { background: var(--rr-white); color: var(--rr-plum-700); box-shadow: inset 0 0 0 1.5px var(--rr-plum-200); }
.rr-card { background: var(--rr-surface); border-radius: var(--rr-radius-md); box-shadow: var(--rr-e1); padding: 16px 18px; }
.rr-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; font: 700 12px/1 var(--rr-font-ui); white-space: nowrap; }
.rr-tag--live { background: var(--rr-success-tint); color: var(--rr-success); }
.rr-tag--paused { background: var(--rr-plum-50); color: var(--rr-plum-500); }
.rr-tag--rented { background: var(--rr-cream-200); color: var(--rr-ink-600); }
.rr-tag--due { background: var(--rr-coral-100); color: var(--rr-coral-800); } /* 4.85:1 */
.rr-num { font-variant-numeric: tabular-nums; }