/* ---------- Base (light) ---------- */
:root {
  /* Brand */
  --color-primary: #b2337f;           /* your pink */
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-error:   #ff4d4f;
  --color-info:    #b2337f;           /* align info to brand by default */

  /* Text & surfaces */
  --color-text:    #1f1f1f;           /* general text */
  --color-bg:      #ffffff;           /* app/page background */

  /* Shape & typography */
  --radius:        12px;
  --font-family:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";

  /* Optional helpers for your own CSS (components already read AntD tokens) */
  --surface-1:     #ffffff;
  --surface-2:     #fafafa;
  --border-subtle: rgba(0, 0, 0, 0.12);

  /* Page-level defaults */
  color-scheme: light;
}

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
}

/* ---------- Dark overrides ---------- */
html[data-theme="dark"] {
  /* Brand stays pink, but we can shift neutrals */
  --color-primary: #b2337f;
  --color-success: #49aa19;
  --color-warning: #d89614;
  --color-error:   #d9363e;
  --color-info:    #b2337f;

  --color-text:    #eaeaea;           /* brighter text */
  --color-bg:      #0f0f12;           /* page background */

  --surface-1:     #141419;           /* cards / containers */
  --surface-2:     #1b1b22;
  --border-subtle: #b2337f7f;

  color-scheme: dark;
}

/* Helpful defaults for your non-AntD elements (hero, sections, etc.) */
section { background: transparent; }
.card-surface {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
a { color: var(--color-primary); }
a:hover { opacity: 0.5; }

/* Make videos/images honor rounded corners when you wrap them */
.rounded { border-radius: var(--radius); overflow: hidden; }