/* ==========================================================================
   DESTINY OS — Core Stylesheet
   Design tokens + glassmorphism + micro-animations + dark mode
   ========================================================================== */

:root{
  --bg: #F8FAFC;
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --text: #0F172A;
  --text-soft: #64748B;
  --border: #E2E8F0;
  --card: #FFFFFF;
  --ring: rgba(37,99,235,0.35);
  --shadow-soft: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.10);
  --shadow-lift: 0 4px 10px rgba(15,23,42,0.06), 0 20px 40px -16px rgba(15,23,42,0.18);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

html.dark{
  --bg: #0B1120;
  --primary: #3B82F6;
  --primary-dark: #60A5FA;
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --text: #E2E8F0;
  --text-soft: #94A3B8;
  --border: #1E293B;
  --card: #111827;
  --ring: rgba(59,130,246,0.35);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  --shadow-lift: 0 4px 10px rgba(0,0,0,0.35), 0 20px 40px -16px rgba(0,0,0,0.6);
}

*{ scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-track{ background: transparent; }

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Utility surface classes ---------- */
.d-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background-color .35s ease, border-color .35s ease;
}
.d-card:hover{ box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.d-glass{
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.d-border{ border-color: var(--border); }
.d-text-soft{ color: var(--text-soft); }

.d-btn-primary{
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  transition: all .2s ease;
  box-shadow: 0 1px 2px rgba(37,99,235,.25), 0 8px 20px -8px rgba(37,99,235,.45);
}
.d-btn-primary:hover{ background: var(--primary-dark); transform: translateY(-1px); }
.d-btn-primary:active{ transform: translateY(0); }

.d-btn-ghost{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: all .2s ease;
}
.d-btn-ghost:hover{ background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: var(--primary); }

/* Focus ring for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Sidebar nav ---------- */
.nav-link{
  display:flex; align-items:center; gap:.65rem;
  padding: .6rem .85rem;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: .875rem;
  font-weight: 500;
  transition: all .18s ease;
  position: relative;
}
.nav-link:hover{ background: color-mix(in srgb, var(--primary) 7%, transparent); color: var(--text); }
.nav-link.active{
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-weight: 600;
}
.nav-link.active svg{ color: var(--primary); }
.nav-link svg{ width:18px; height:18px; flex-shrink:0; }

/* ---------- Progress bars ---------- */
.d-progress-track{ background: color-mix(in srgb, var(--border) 70%, transparent); border-radius: 999px; overflow:hidden; }
.d-progress-fill{ height:100%; border-radius:999px; transition: width 1s cubic-bezier(.16,1,.3,1); }

/* ---------- Fade / slide utility animations ---------- */
@keyframes d-fade-in{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
.d-fade-in{ animation: d-fade-in .5s cubic-bezier(.16,1,.3,1) both; }

@keyframes d-scale-in{ from{opacity:0; transform: scale(.97);} to{opacity:1; transform:scale(1);} }
.d-scale-in{ animation: d-scale-in .4s cubic-bezier(.16,1,.3,1) both; }

.stagger > *{ animation: d-fade-in .5s cubic-bezier(.16,1,.3,1) both; }
.stagger > *:nth-child(1){ animation-delay: .02s; }
.stagger > *:nth-child(2){ animation-delay: .07s; }
.stagger > *:nth-child(3){ animation-delay: .12s; }
.stagger > *:nth-child(4){ animation-delay: .17s; }
.stagger > *:nth-child(5){ animation-delay: .22s; }
.stagger > *:nth-child(6){ animation-delay: .27s; }
.stagger > *:nth-child(7){ animation-delay: .32s; }
.stagger > *:nth-child(8){ animation-delay: .37s; }

/* Checkbox custom */
.d-check{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; border-radius:7px;
  border:1.5px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; position:relative;
  transition: all .18s ease;
}
.d-check:checked{ background: var(--success); border-color: var(--success); }
.d-check:checked::after{
  content:''; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid white; border-width:0 2px 2px 0; transform: rotate(40deg);
}

/* Toggle switch (dark mode etc) */
.d-switch{ width:42px; height:24px; border-radius:999px; background: var(--border); position:relative; cursor:pointer; transition: background .25s ease; flex-shrink:0; }
.d-switch.on{ background: var(--primary); }
.d-switch .knob{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.d-switch.on .knob{ transform: translateX(18px); }

/* Skeleton loading shimmer (rarely needed, local app) */
@keyframes shimmer{ 0%{background-position: -200% 0;} 100%{background-position: 200% 0;} }
.d-skel{ background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 50%, transparent) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }

/* Number ticker */
.d-num{ font-variant-numeric: tabular-nums; letter-spacing:-0.02em; }

/* Toast */
.d-toast{ box-shadow: var(--shadow-lift); }

/* Landing page specific */
.hero-glow{
  background: radial-gradient(60% 60% at 50% 20%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%);
}
.pillar-card{ transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.pillar-card:hover{ transform: translateY(-4px) scale(1.01); }

/* Form inputs (biodata, etc.) */
.d-input{
  width: 100%;
  font-size: 13px;
  padding: .5rem .65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease;
}
.d-input:focus{ border-color: var(--primary); }
select.d-input{ appearance: auto; }

[x-cloak]{ display:none !important; }