/* Design tokens — auto light/dark via prefers-color-scheme. */

:root {
  /* Structure */
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --gap: 12px;
  --pad: 18px;
  --page-pad: clamp(16px, 4vw, 28px);

  /* Motion */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 320ms;

  /* Type */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.72rem;
  --fs-sm: 0.84rem;
  --fs-md: 0.98rem;
  --fs-lg: clamp(1.15rem, 3.4vw, 1.3rem);
  --fs-xl: clamp(1.45rem, 5vw, 1.75rem);

  /* Light scheme (default) */
  color-scheme: light dark;
  --bg: #F5F2EC;
  --bg-accent: rgba(232, 147, 12, 0.06);
  --surface: #FFFFFF;
  --surface-2: #FBF9F5;
  --border: rgba(23, 28, 38, 0.08);
  --border-strong: rgba(23, 28, 38, 0.14);
  --text: #1A202C;
  --text-dim: #5B6472;
  --text-faint: #9AA1AC;

  --amber: #E8930C;
  --amber-soft: rgba(232, 147, 12, 0.14);
  --amber-ink: #FFFFFF;
  --glow: rgba(232, 147, 12, 0.28);

  --teal: #0E9384;
  --teal-soft: rgba(14, 147, 132, 0.11);
  --violet: #7C4DDF;
  --violet-soft: rgba(124, 77, 223, 0.10);
  --green: #178A43;
  --green-soft: rgba(23, 138, 67, 0.12);
  --red: #D33F3F;
  --red-soft: rgba(211, 63, 63, 0.12);
  --blue: #2E7CD6;
  --blue-soft: rgba(46, 124, 214, 0.12);
  --glow-cool: rgba(46, 124, 214, 0.28);
  --pink: #E0559A;

  --shadow-card: 0 1px 2px rgba(23, 28, 38, 0.04), 0 10px 30px rgba(23, 28, 38, 0.07);
  --shadow-float: 0 6px 16px rgba(23, 28, 38, 0.12), 0 24px 60px rgba(23, 28, 38, 0.18);
  --blur-bg: rgba(255, 255, 255, 0.82);
  --backdrop: rgba(23, 28, 38, 0.32);
  --skeleton: rgba(23, 28, 38, 0.07);
  --skeleton-shine: rgba(23, 28, 38, 0.03);

  --plan-wall: #444B57;
  --plan-room: rgba(23, 28, 38, 0.03);
  --plan-room-active: rgba(232, 147, 12, 0.30);
  --plan-label: #7A828E;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0F17;
    --bg-accent: rgba(255, 180, 84, 0.05);
    --surface: rgba(255, 255, 255, 0.055);
    --surface-2: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #EDF1F7;
    --text-dim: #99A3B6;
    --text-faint: #5E677A;

    --amber: #FFB454;
    --amber-soft: rgba(255, 180, 84, 0.14);
    --amber-ink: #221302;
    --glow: rgba(255, 180, 84, 0.35);

    --teal: #3DDBC4;
    --teal-soft: rgba(61, 219, 196, 0.10);
    --violet: #B49AF7;
    --violet-soft: rgba(180, 154, 247, 0.10);
    --green: #52DE8B;
    --green-soft: rgba(82, 222, 139, 0.12);
    --red: #FF7B7B;
    --red-soft: rgba(255, 123, 123, 0.13);
    --blue: #6FB5FF;
    --blue-soft: rgba(111, 181, 255, 0.13);
    --glow-cool: rgba(111, 181, 255, 0.35);
    --pink: #FF9EC8;

    --shadow-card: none;
    --shadow-float: 0 24px 60px rgba(0, 0, 0, 0.5);
    --blur-bg: rgba(15, 20, 30, 0.78);
    --backdrop: rgba(2, 4, 8, 0.55);
    --skeleton: rgba(255, 255, 255, 0.06);
    --skeleton-shine: rgba(255, 255, 255, 0.11);

    --plan-wall: #A9B2C2;
    --plan-room: rgba(255, 255, 255, 0.02);
    --plan-room-active: rgba(255, 180, 84, 0.32);
    --plan-label: #8A93A6;
  }
}