/* MewArt Design Tokens — single theme: Coral Pop
   Modern · Tech · Năng động — coral/salmon pink + peach cream + deep navy.
   Inspired by NFT/beauty/tech app aesthetic (Hypebeast, AirPods, Pixury).
   Coral = primary energetic CTA. Navy = sharp tech accent.
   Applied globally via :root; HTML files also carry [data-theme="coral-pop"]
   so the component overrides in styles.css keep matching. */

/* ============================================================
   THEME — Coral Pop (the only theme)
   ============================================================ */
:root,
:root[data-theme="coral-pop"] {
  --bg-0: #ffffff;          /* elevated cards */
  --bg-1: #fce4dc;          /* peach cream page bg */
  --bg-2: #ffd8cc;          /* soft coral surface */
  --bg-3: #f8c5b6;          /* divider tone */
  --bg-4: #e89e8e;          /* muted coral */
  --bg-5: #1a1a2e;          /* deep navy brand */
  --bg-dark: #1a1a2e;       /* navy inset block — sharp tech contrast */
  --bg-dark-2: #252540;
  --nav-bg: rgba(252, 228, 220, 0.85);
  --border: #f3c8b9;
  --border-strong: #1a1a2e;
  --divider: rgba(26, 26, 46, 0.10);

  --text-1: #1a1a2e;        /* navy as primary text — tech feel */
  --text-2: #2a2a40;
  --text-3: #5a5d75;
  --text-4: #8a8d9f;
  --text-5: #b0b2bf;
  --text-light-1: #ffffff;
  --text-light-2: #ffd8cc;
  --text-light-3: #e89e8e;
  --text-dark-1: #1a1a2e;
  --text-dark-2: #2a2a40;
  --text-dark-3: #5a5d75;

  /* PRIMARY = CORAL POP — vibrant, energetic CTA */
  --pink: #ff7a6b;          /* ★ coral primary */
  --pink-2: #f95d4d;        /* hover */
  --pink-3: #e34938;        /* pressed */
  --pink-soft: #ffdcd3;     /* soft chip / badge bg */
  --pink-tint: rgba(255, 122, 107, 0.12);
  --pink-glow: rgba(255, 122, 107, 0.40);

  --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.05);
  --shadow-md: 0 4px 14px rgba(26, 26, 46, 0.10);
  --shadow-lg: 0 16px 40px rgba(255, 122, 107, 0.20);
}

/* ============================================================
   Shared tokens — typography, spacing, radius, easing
   ============================================================ */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 44px;
  --fs-4xl: 64px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 96px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  --shadow-pink: 0 0 32px var(--pink-glow);
  --shadow-pink-sm: 0 4px 16px var(--pink-glow);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms var(--ease);
  --t-base: 200ms var(--ease);
}

/* Semantic colors (constant) */
:root {
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --success-bg: rgba(16, 185, 129, 0.10);
  --warning-bg: rgba(245, 158, 11, 0.10);
  --danger-bg: rgba(239, 68, 68, 0.10);
}