/* Casting Engine v3 — one restrained palette, inverted across light and dark. */
:root {
  color-scheme: light;

  --canvas: #f7f8f3;
  --panel: #ffffff;
  --panel-subtle: #eef1e9;
  --panel-strong: #e3e7dc;
  --border: #dce1d5;
  --fg: #171914;
  --muted: #6f756a;

  --lime: #c8ff3d;
  --lime-hover: #bdf52f;
  --lime-rgb: 200, 255, 61;
  --on-lime: #171914;

  --success: #16835b;
  --info: #3d67b1;
  --neutral-status: #72786d;
  --danger: #b42318;

  --arch-ride-or-die: #ad4777;
  --arch-hustler: #1a7654;
  --arch-diva: #2f6f8d;
  --arch-storyline: #a33a40;
  --arch-comedian: #846715;
  --arch-wildcard: #7355a4;
  --arch-party-animal: #a44e20;
  --arch-unknown: #73786e;
  --arch-alpha: 12%;

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 650;
  --weight-bold: 760;

  --fg-hero: clamp(48px, 9vw, 68px);
  --fg-title: clamp(28px, 6vw, 38px);
  --fg-card: 19px;
  --fg-body: 15px;
  --fg-label: 12px;
  --leading-tight: 1.08;
  --tracking-tight: -0.035em;
  --tracking-label: 0.02em;

  --control-height: 48px;
  --control-radius: 12px;
  --control-font: 14px;
  --press-scale: 0.985;

  --radius-card: 18px;
  --radius-small: 10px;
  --radius-round: 999px;
  --card-padding: 20px;
  --shadow-card: 0 16px 40px rgba(35, 39, 29, 0.08);
  --shadow-overlay: 0 24px 64px rgba(17, 20, 14, 0.22);
  --photo-fade: linear-gradient(to top, rgba(15, 17, 13, 0.86) 0%, rgba(15, 17, 13, 0) 76%);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --page-gutter: 20px;
  --section-space: 40px;
  --rail-width: 232px;
  --bottom-nav-height: 72px;

  --focus-ring: 0 0 0 3px rgba(87, 105, 31, 0.2);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #11130f;
  --panel: #191c16;
  --panel-subtle: #22261e;
  --panel-strong: #2a3025;
  --border: #343a2f;
  --fg: #f1f3eb;
  --muted: #9da497;
  --lime: #bdf52f;
  --lime-hover: #c8ff3d;
  --lime-rgb: 189, 245, 47;
  --on-lime: #14170f;
  --success: #59c99a;
  --info: #79a3e8;
  --neutral-status: #a0a69a;
  --danger: #ff8a80;
  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.2);
  --shadow-overlay: 0 28px 72px rgba(0, 0, 0, 0.48);
}

@media (min-width: 768px) {
  :root {
    --page-gutter: 32px;
    --card-padding: 24px;
    --control-height: 44px;
  }
}