/* ============================================================
   SINGK MALAYSIA — DESIGN TOKENS
   "Neon After Dark" colour system
   ============================================================ */

:root {
  /* Background scale */
  --bg-0: #0B0714;        /* page background, deep aubergine-black */
  --bg-1: #140D24;        /* cards */
  --bg-2: #1E1535;        /* raised surfaces */
  --line: #2C2147;        /* borders */

  /* Text */
  --text-1: #F4F1FA;      /* headings */
  --text-2: #C9C2DB;      /* body — 7:1+ contrast on bg-0 */
  --text-3: #8F86A8;      /* meta, captions */

  /* Accent */
  --neon-pink: #FF3E9A;   /* primary accent, CTAs */
  --neon-cyan: #27E1FA;   /* secondary accent, links on hover */
  --gold: #F5C46B;        /* ratings, lounge badge */
  --family: #5BE49B;      /* family-karaoke badge */

  /* Feedback */
  --success: #5BE49B;
  --warning: #F5C46B;
  --error: #FF6B6B;

  /* Shape */
  --radius: 18px;
  --radius-sm: 8px;
  --radius-pill: 100px;

  /* Shadow / glow */
  --shadow-glow: 0 0 0 1px var(--line), 0 10px 40px -10px rgba(255, 62, 154, 0.35);
  --shadow-card: 0 0 0 1px var(--line), 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 0 0 1px rgba(255, 62, 154, 0.4), 0 12px 48px -8px rgba(255, 62, 154, 0.45);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --maxw: 1200px;
  --maxw-text: 720px;
  --header-h: 64px;

  /* Type scale (fluid) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.5rem, 2.5vw, 1.85rem);
  --text-4xl: clamp(1.75rem, 4vw, 2.75rem);

  /* Font families */
  --font-head: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-zh: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Z-index layers */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */

[data-theme="light"] {
  --bg-0: #F8F6FF;
  --bg-1: #FFFFFF;
  --bg-2: #EDE9F8;
  --line: #D5CEF0;
  --text-1: #120A28;
  --text-2: #2E2352;
  --text-3: #6B5F8A;
  --neon-pink: #CC1A73;   /* darkened for contrast on light bg */
  --neon-cyan: #0A8FA3;
  --gold: #B8820A;
  --family: #1A8A55;
  --shadow-glow: 0 0 0 1px var(--line), 0 10px 40px -10px rgba(204, 26, 115, 0.2);
  --shadow-card: 0 0 0 1px var(--line), 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 0 0 1px rgba(204, 26, 115, 0.3), 0 12px 48px -8px rgba(204, 26, 115, 0.2);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-0: #F8F6FF;
    --bg-1: #FFFFFF;
    --bg-2: #EDE9F8;
    --line: #D5CEF0;
    --text-1: #120A28;
    --text-2: #2E2352;
    --text-3: #6B5F8A;
    --neon-pink: #CC1A73;
    --neon-cyan: #0A8FA3;
    --gold: #B8820A;
    --family: #1A8A55;
    --shadow-glow: 0 0 0 1px var(--line), 0 10px 40px -10px rgba(204, 26, 115, 0.2);
    --shadow-card: 0 0 0 1px var(--line), 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 0 0 1px rgba(204, 26, 115, 0.3), 0 12px 48px -8px rgba(204, 26, 115, 0.2);
  }
}