/* ============================================
   Design System — Warm Premium
   Inspired by modern product launch templates
   ============================================ */

:root {
  /* Typography */
  --font-display: "ZCOOL KuaiLe", "Noto Sans SC", sans-serif;
  --font-body: "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 96px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 200ms;
  --normal: 350ms;
  --slow: 500ms;

  /* Layout */
  --max-width: 1080px;
  --content-padding: 24px;
}

/* ---- Light ---- */
[data-theme="light"],
:root {
  --bg: #fbf7f2;
  --bg-alt: #f5efe7;
  --bg-card: #ffffff;
  --bg-card-hover: #fffcf8;
  --bg-elevated: #ffffff;

  --text: #2c1810;
  --text-secondary: #7a6352;
  --text-muted: #b8a08a;
  --text-inverse: #ffffff;

  --accent: #e87730;
  --accent-hover: #d4682a;
  --accent-light: #fff0e5;
  --accent-subtle: rgba(232, 119, 48, 0.08);

  --cat: #d4688c;
  --cat-light: #fff0f4;
  --cat-border: #f5c0d0;
  --dog: #5a9fbf;
  --dog-light: #ebf5fa;
  --dog-border: #a8d4e8;

  --border: rgba(44, 24, 16, 0.06);
  --border-strong: rgba(44, 24, 16, 0.12);
  --divider: rgba(44, 24, 16, 0.05);

  --shadow-xs: 0 1px 2px rgba(44, 24, 16, 0.04);
  --shadow-sm: 0 2px 8px rgba(44, 24, 16, 0.06);
  --shadow-md: 0 4px 20px rgba(44, 24, 16, 0.08);
  --shadow-lg: 0 12px 40px rgba(44, 24, 16, 0.1);
  --shadow-xl: 0 20px 60px rgba(44, 24, 16, 0.12);

  --overlay: rgba(44, 24, 16, 0.4);
  --tooltip-bg: #2c1810;
  --tooltip-text: #fbf7f2;

  --disclaimer-bg: #fff5eb;
  --disclaimer-border: #ffe0c0;
  --disclaimer-text: #a85a1a;

  --card-playing-glow: rgba(232, 119, 48, 0.15);
  --card-playing-border: #e87730;
  --card-error-bg: #fff0f0;
  --card-error-border: #e57373;

  --gradient-hero: linear-gradient(
    170deg,
    #fbf7f2 0%,
    #fff5eb 40%,
    #fbf7f2 100%
  );
  --gradient-section: linear-gradient(
    180deg,
    transparent 0%,
    rgba(232, 119, 48, 0.03) 50%,
    transparent 100%
  );
}

/* ---- Dark ---- */
[data-theme="dark"] {
  --bg: #16120e;
  --bg-alt: #1e1914;
  --bg-card: #252018;
  --bg-card-hover: #2c2620;
  --bg-elevated: #2a2418;

  --text: #f0e4d6;
  --text-secondary: #b8a08a;
  --text-muted: #7a6352;
  --text-inverse: #16120e;

  --accent: #f0923a;
  --accent-hover: #ffa550;
  --accent-light: #2e2010;
  --accent-subtle: rgba(240, 146, 58, 0.08);

  --cat: #e88aaa;
  --cat-light: #2a1c22;
  --cat-border: #4a2c38;
  --dog: #6ab8d8;
  --dog-light: #1a2630;
  --dog-border: #2a4050;

  --border: rgba(240, 228, 214, 0.06);
  --border-strong: rgba(240, 228, 214, 0.12);
  --divider: rgba(240, 228, 214, 0.05);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.4);

  --overlay: rgba(0, 0, 0, 0.6);
  --tooltip-bg: #f0e4d6;
  --tooltip-text: #16120e;

  --disclaimer-bg: #2a1c10;
  --disclaimer-border: #3e2a18;
  --disclaimer-text: #f0a050;

  --card-playing-glow: rgba(240, 146, 58, 0.1);
  --card-playing-border: #f0923a;
  --card-error-bg: #2a1818;
  --card-error-border: #c05050;

  --gradient-hero: linear-gradient(
    170deg,
    #16120e 0%,
    #1e1610 40%,
    #16120e 100%
  );
  --gradient-section: linear-gradient(
    180deg,
    transparent 0%,
    rgba(240, 146, 58, 0.02) 50%,
    transparent 100%
  );
}