/* =========================================================
   RAXSA PORTAL v3.0 — BASE
   Design Tokens | Reset | Typography
   Brand: Kuning + Hitam + Putih
========================================================= */

/* ─── Design Tokens ─── */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', var(--font-sans);

  /* Brand Colors */
  --raxsa-yellow: #F5B800;
  --raxsa-yellow-light: #FFF3CD;
  --raxsa-yellow-dark: #D4A017;
  --raxsa-black: #0A0A0A;
  --raxsa-black-soft: #1A1A1A;
  --raxsa-gray: #2A2A2A;
  --raxsa-gray-light: #6B6B6B;
  --raxsa-white: #FFFFFF;
  --raxsa-offwhite: #F5F5F5;

  /* Semantic */
  --color-bg: var(--raxsa-offwhite);
  --color-surface: var(--raxsa-white);
  --color-surface-elevated: var(--raxsa-white);
  --color-border: #E5E5E5;
  --color-text: var(--raxsa-black);
  --color-text-secondary: var(--raxsa-gray-light);
  --color-text-muted: #9CA3AF;
  --color-primary: var(--raxsa-yellow);
  --color-primary-dark: var(--raxsa-yellow-dark);
  --color-primary-light: var(--raxsa-yellow-light);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --transition: 0.2s ease;
}

[data-theme="dark"] {
  --color-bg: var(--raxsa-black);
  --color-surface: var(--raxsa-black-soft);
  --color-surface-elevated: var(--raxsa-gray);
  --color-border: #333333;
  --color-text: var(--raxsa-white);
  --color-text-secondary: #A1A1AA;
  --color-text-muted: #71717A;
  --color-primary: var(--raxsa-yellow);
  --color-primary-dark: var(--raxsa-yellow);
  --color-primary-light: rgba(245, 184, 0, 0.15);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ─── Typography ─── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; }