/* =========================================================
   BioCard — Design Tokens
   Sumber: PRD §7.1 + DESIGN.md ("Luminous Fintech")
   Warna utama bisa ditimpa per BioCard lewat --primary (JS).
   ========================================================= */

:root {
  color-scheme: light;

  /* Tipografi */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --fs-hero: 2.5rem;      /* 40 */
  --fs-h1: 1.75rem;       /* 28 */
  --fs-h2: 1.25rem;       /* 20 */
  --fs-h3: 1.125rem;      /* 18 */
  --fs-body: 0.9375rem;   /* 15 */
  --fs-md: 0.875rem;      /* 14 */
  --fs-sm: 0.75rem;       /* 12 */
  --fs-xs: 0.6875rem;     /* 11 */

  /* Warna brand */
  --primary: #5B5BF0;
  --primary-rgb: 91, 91, 240;
  --primary-hover: #4A4AE2;
  --primary-ink: #4343D6;            /* teks berwarna primer (kontras AA) */
  --violet: #8B5CF6;
  --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--violet) 100%);
  --grad-hero: linear-gradient(135deg, #8E9CF5 0%, #A99BF7 100%);
  --hero-shade: linear-gradient(135deg, rgba(var(--primary-rgb), .62) 0%, rgba(var(--primary-rgb), .18) 48%, rgba(var(--primary-rgb), 0) 80%);

  /* Permukaan */
  --bg: #F3F4FB;
  --glow-a: rgba(142, 156, 245, .30);
  --glow-b: rgba(169, 155, 247, .24);
  --glow-c: rgba(34, 211, 238, .10);
  --surface: rgba(255, 255, 255, .78);
  --surface-strong: rgba(255, 255, 255, .90);
  --surface-solid: #FFFFFF;
  --surface-2: #F6F5FF;              /* isian, baris di dalam kartu */
  --surface-3: #EDEBFF;              /* tab nonaktif, chip */
  --border: rgba(255, 255, 255, .75);
  --line: rgba(122, 120, 148, .14);
  --line-strong: rgba(122, 120, 148, .26);

  /* Teks */
  --text: #1E1B3A;
  --muted: #716F8C;                  /* #7A7894 sedikit digelapkan agar lolos AA di atas putih */
  --subtle: #A3A1B8;

  /* Status */
  --success: #22C55E;  --success-ink: #15803D;  --success-bg: rgba(34, 197, 94, .12);
  --danger:  #EF4444;  --danger-ink:  #B91C1C;  --danger-bg:  rgba(239, 68, 68, .11);
  --warning: #F59E0B;  --warning-ink: #B45309;  --warning-bg: rgba(245, 158, 11, .14);
  --info:    #3B82F6;  --info-ink:    #1D4ED8;  --info-bg:    rgba(59, 130, 246, .11);
  --cyan:    #22D3EE;
  --primary-bg: rgba(var(--primary-rgb), .10);

  /* Bentuk */
  --r-xl: 28px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-xs: 8px;
  --pill: 999px;

  /* Kedalaman */
  --blur: blur(16px) saturate(150%);
  --blur-strong: blur(24px) saturate(160%);
  --shadow-1: 0 8px 32px -4px rgba(91, 91, 240, .07), 0 4px 12px -2px rgba(30, 27, 58, .035);
  --shadow-2: 0 16px 40px -6px rgba(91, 91, 240, .14), 0 6px 16px -3px rgba(30, 27, 58, .06);
  --shadow-pill: 0 2px 8px rgba(30, 27, 58, .07);
  --glow: 0 10px 24px -6px rgba(var(--primary-rgb), .45);
  --ring: 0 0 0 3px rgba(var(--primary-rgb), .28);

  /* Ritme */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;

  --sidebar-w: 240px;
  --topbar-h: 64px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --primary: #7C7CFF;
  --primary-rgb: 124, 124, 255;
  --primary-hover: #8F8FFF;
  --primary-ink: #A9A9FF;
  --violet: #9F7AFA;
  --grad-hero: linear-gradient(135deg, #5D68D6 0%, #7B5FD8 100%);
  --hero-shade: linear-gradient(135deg, rgba(20, 18, 60, .25) 0%, rgba(20, 18, 60, 0) 70%);

  --bg: #12111F;
  --glow-a: rgba(91, 91, 240, .20);
  --glow-b: rgba(139, 92, 246, .14);
  --glow-c: rgba(34, 211, 238, .06);
  --surface: rgba(28, 27, 46, .80);
  --surface-strong: rgba(32, 31, 52, .94);
  --surface-solid: #1C1B2E;
  --surface-2: #24233A;
  --surface-3: #2C2B46;
  --border: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .15);

  --text: #EEEDFB;
  --muted: #A6A4C2;
  --subtle: #6F6D8C;

  --success-ink: #4ADE80;  --success-bg: rgba(34, 197, 94, .16);
  --danger-ink:  #F87171;  --danger-bg:  rgba(239, 68, 68, .16);
  --warning-ink: #FBBF24;  --warning-bg: rgba(245, 158, 11, .16);
  --info-ink:    #7DB2FF;  --info-bg:    rgba(59, 130, 246, .18);
  --primary-bg: rgba(var(--primary-rgb), .16);

  --shadow-1: 0 8px 32px -6px rgba(0, 0, 0, .45), 0 2px 8px -2px rgba(0, 0, 0, .3);
  --shadow-2: 0 18px 44px -8px rgba(0, 0, 0, .6), 0 6px 16px -3px rgba(0, 0, 0, .35);
  --shadow-pill: 0 2px 8px rgba(0, 0, 0, .35);
  --glow: 0 10px 26px -6px rgba(var(--primary-rgb), .5);
}