/* ==========================================================================
   CT TOYS — Design Tokens (light-pink theme)
   All colours are centralised here. Change once, apply everywhere.
   ========================================================================== */
:root {
  /* Surfaces */
  --bg-primary: #faf3f6;      /* page main background (light pink) */
  --bg-secondary: #ffffff;    /* cards / content areas */
  --bg-soft: #f8f2f5;        /* alternating sections / placeholder base */
  --surface-elevated: #fff5f7;/* hover cards / dropdown background */

  /* Brand */
  --accent: #ec4899;         /* primary accent — fills / large UI / borders */
  --accent-text: #c2185b;    /* darker accent for ≤18px text (WCAG AA ≈5.4:1 on #faf3f6) */
  --accent-hover: #db2777;   /* hover state */
  --accent-light: #f9a8d4;   /* badges / tags / soft emphasis */

  /* Text */
  --text-primary: #1f2937;   /* headings / body */
  --text-secondary: #6b7280; /* subtitles / descriptions */
  --text-muted: #9ca3af;     /* placeholder text / disabled */

  /* Lines */
  --border: #f3e8ee;         /* dividers / card borders / inputs */

  /* Dark blocks (footer / deep contrast sections) — pink-tinted */
  --ink: #2b1224;            /* footer / dark section background */
  --ink-soft: #3d1a33;       /* secondary dark surface */

  /* Radii */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-sm: 0 4px 20px rgba(43, 18, 36, 0.06);
  --shadow: 0 8px 32px rgba(236, 72, 153, 0.12);
  --shadow-lg: 0 20px 60px rgba(43, 18, 36, 0.16);

  /* Layout */
  --maxw: 1280px;
  --nav-h: 72px;

  /* Type */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-display: 'Segoe UI', system-ui, sans-serif;

  /* Motion */
  --transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}