/* Cute Lady shared design foundation.
   Source: Stage71B Owner foundations/components, Stage71D Staff evidence,
   and the approved Stage59 customer reference lock. */
:root {
  color-scheme: dark;

  --cl-color-app: #08040b;
  --cl-color-raised: #1a0b20;
  --cl-color-raised-rgb: 26, 11, 32;
  --cl-color-card: #27102f;
  --cl-color-card-alt: #35173d;
  --cl-color-cream-50: #fff7fb;
  --cl-color-cream-200: #f3dde8;
  --cl-color-gold-400: #e8c46a;
  --cl-color-pink-400: #f19ac5;
  --cl-color-violet-400: #a98cff;
  --cl-color-green-400: #78d6b2;
  --cl-color-rose-400: #ff7f9f;
  --cl-color-border: rgba(232, 196, 106, 0.2);
  --cl-color-border-neutral: rgba(255, 247, 251, 0.1);
  --cl-text-primary: var(--cl-color-cream-50);
  --cl-text-muted: rgba(243, 221, 232, 0.72);
  --cl-text-soft: rgba(243, 221, 232, 0.52);

  --cl-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cl-font-display: Georgia, "Times New Roman", serif;
  --cl-font-script: "Brush Script MT", "Segoe Script", "Monotype Corsiva", "Apple Chancery", Georgia, serif;

  --cl-space-1: 4px;
  --cl-space-2: 8px;
  --cl-space-3: 12px;
  --cl-space-4: 16px;
  --cl-space-5: 24px;
  --cl-space-6: 32px;
  --cl-radius-control: 12px;
  --cl-radius-card: 16px;
  --cl-radius-panel: 20px;
  --cl-radius-pill: 999px;
  --cl-tap-min: 44px;

  --cl-safe-top: env(safe-area-inset-top, 0px);
  --cl-safe-right: env(safe-area-inset-right, 0px);
  --cl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cl-safe-left: env(safe-area-inset-left, 0px);
  --cl-nav-height: 78px;
  --cl-nav-offset: calc(8px + var(--cl-safe-bottom));
  --cl-nav-clearance: calc(var(--cl-nav-height) + var(--cl-nav-offset) + 20px);

  --cl-shadow-card: 0 14px 40px rgba(0, 0, 0, 0.24);
  --cl-shadow-float: 0 18px 54px rgba(0, 0, 0, 0.44);
  --cl-focus-ring: 0 0 0 3px rgba(169, 140, 255, 0.34);
  --cl-motion-fast: 160ms;
  --cl-motion-base: 240ms;
  --cl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--cl-color-violet-400);
  outline-offset: 2px;
  box-shadow: var(--cl-focus-ring);
}

:where(button, input, select, textarea):disabled,
:where([role="button"])[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
}

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