/* =============================================================
   INSYNTIVE Academy — design tokens (Dhany Indraswara system)
   ============================================================= */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* Brand */
  --brand-primary:      #02A0C1;
  --brand-secondary:    #3581E1;
  --brand-soft-blue:    #D7E8FB;
  --brand-soft-teal:    #97D1C6;
  --brand-accent-green: #D6FD91;

  /* Neutrals */
  --neutral-light: #EDEDED;
  --neutral-page:  #F7F8FA;
  --neutral-white: #FFFFFF;
  --neutral-line:  #E6E8EC;

  /* Text */
  --text-primary:   #1F1F1F;
  --text-secondary: #4A4A4A;
  --text-muted:     #7A7A7A;
  --text-on-brand:  #FFFFFF;

  --fg-1: var(--text-primary);
  --fg-2: var(--text-secondary);
  --fg-3: var(--text-muted);
  --bg-1: var(--neutral-page);
  --bg-2: var(--neutral-white);
  --bg-3: var(--neutral-light);
  --link: var(--brand-primary);

  /* Semantic */
  --pos: #1A8C5C;
  --pos-soft: #E4F6EC;
  --neg: #C73E3E;
  --neg-soft: #FBEAEA;
  --warn: #C98A12;
  --warn-soft: #FBF2DD;

  /* Glass */
  --glass-bg:        rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.78);
  --glass-border:    rgba(255,255,255,0.65);
  --glass-blur:      blur(28px) saturate(140%);

  /* Halos */
  --halo-primary:   rgba(2,160,193,0.42);
  --halo-secondary: rgba(53,129,225,0.38);
  --halo-soft-blue: rgba(215,232,251,0.95);
  --halo-green:     rgba(214,253,145,0.55);

  /* Gradients */
  --grad-primary:   linear-gradient(135deg, #02A0C1 0%, #3581E1 100%);
  --grad-soft-blue: linear-gradient(180deg, #FFFFFF 0%, #D7E8FB 100%);
  --grad-page:      radial-gradient(120% 80% at 8% -5%, #EAF3FE 0%, #F7F8FA 48%, #FFFFFF 100%);

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 48px rgba(15,23,42,0.10);
  --shadow-glow-primary:   0 18px 48px rgba(2,160,193,0.28);
  --shadow-glow-secondary: 0 18px 48px rgba(53,129,225,0.28);
  --shadow-inner-soft: inset 0 1px 0 rgba(255,255,255,0.7);

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Type */
  --font-family-base: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-family-base);
  color: var(--fg-1);
  background: var(--bg-1);
  font-weight: var(--fw-medium);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--brand-soft-blue); }

/* Scrollbar */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #D5DAE2; border-radius: 999px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md), var(--shadow-inner-soft);
}

.eyebrow {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--brand-primary);
}

.grad-text {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes inFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes inFadeSm { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes haloDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-18px) scale(1.08); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.9); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }
@keyframes drawIn { from { stroke-dashoffset: var(--len, 600); } to { stroke-dashoffset: 0; } }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes growBarX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lineDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes popDot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

.anim-in { animation: inFade 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.anim-in-sm { animation: inFadeSm 0.4s cubic-bezier(0.22,1,0.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; }
}