/**
 * Kasturi Students' Corner — Design System
 * Complete CSS token system, typography, layout utilities, and theme support.
 * Uses CSS custom properties for full dark/light mode control.
 */

/* ─── Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand-50:  #ecfdf5;  --brand-100: #d1fae5;  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;  --brand-400: #34d399;  --brand-500: #10b981;
  --brand-600: #059669;  --brand-700: #047857;  --brand-800: #065f46;
  --brand-900: #064e3b;

  /* Accent (Teal) */
  --accent-400: #2dd4bf;  --accent-500: #14b8a6;  --accent-600: #0d9488;

  /* Amber (Warnings / Highlights) */
  --amber-400: #fbbf24;  --amber-500: #f59e0b;

  /* Rose (Errors / Likes) */
  --rose-400: #fb7185;  --rose-500: #f43f5e;  --rose-600: #e11d48;

  /* Indigo (Info) */
  --indigo-400: #818cf8;  --indigo-500: #6366f1;

  /* Light theme (default) */
  --bg:           #f8faf9;
  --bg-alt:       #ffffff;
  --bg-elevated:  #ffffff;
  --bg-inset:     #f1f5f3;
  --bg-overlay:   rgba(255, 255, 255, 0.82);
  --text:         #1e293b;
  --text-secondary: #475569;
  --text-muted:   #94a3b8;
  --text-inverse: #ffffff;
  --border:       #e2e8f0;
  --border-light: #f1f5f9;
  --ring:         rgba(5, 150, 105, 0.25);
  --shadow-color: 210 40% 80%;
  --card-bg:      rgba(255, 255, 255, 0.75);
  --card-border:  rgba(226, 232, 240, 0.6);
  --nav-bg:       rgba(255, 255, 255, 0.88);
  --input-bg:     rgba(241, 245, 249, 0.6);
  --code-bg:      #f1f5f9;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--brand-600), var(--accent-500));
  --gradient-hero:  linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 50%, #f8faf9 100%);
  --gradient-card:  linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,249,0.7) 100%);

  /* Spacing scale */
  --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;

  /* Border radius */
  --radius-sm: 0.375rem;  --radius-md: 0.625rem;  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;  --radius-2xl: 1.25rem;  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-brand: 0 4px 14px -3px rgba(5, 150, 105, 0.25);
  --shadow-glow:  0 0 20px rgba(5, 150, 105, 0.15);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Typography */
  --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Z-index layers */
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ─── Dark Theme ────────────────────────────────────────────────── */
.dark {
  --bg:           #0c1017;
  --bg-alt:       #111827;
  --bg-elevated:  #1e293b;
  --bg-inset:     #0f172a;
  --bg-overlay:   rgba(15, 16, 23, 0.88);
  --text:         #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:   #64748b;
  --text-inverse: #0f172a;
  --border:       #1e293b;
  --border-light: #1a2332;
  --ring:         rgba(52, 211, 153, 0.3);
  --shadow-color: 220 40% 5%;
  --card-bg:      rgba(17, 24, 39, 0.7);
  --card-border:  rgba(30, 41, 59, 0.5);
  --nav-bg:       rgba(12, 16, 23, 0.92);
  --input-bg:     rgba(30, 41, 59, 0.5);
  --code-bg:      #1e293b;

  --gradient-hero:  linear-gradient(135deg, #0c1017 0%, #0f172a 50%, #111827 100%);
  --gradient-card:  linear-gradient(180deg, rgba(17,24,39,0.8) 0%, rgba(15,23,42,0.6) 100%);
}

/* ─── Base Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  transition: background var(--duration-slow) var(--ease-out),
              color var(--duration-slow) var(--ease-out);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ─── Typography Scale ──────────────────────────────────────────── */
.text-xs   { font-size: 0.75rem;  line-height: 1rem;    }
.text-sm   { font-size: 0.8125rem;line-height: 1.25rem; }
.text-base { font-size: 0.9375rem;line-height: 1.5rem;  }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem;    }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem;  }
.text-5xl  { font-size: 3rem;     line-height: 1.15;    }

.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }
.font-black    { font-weight: 900; }

.tracking-tight  { letter-spacing: -0.02em; }
.tracking-wide   { letter-spacing: 0.05em; }
.tracking-wider  { letter-spacing: 0.08em; }
.uppercase       { text-transform: uppercase; }

.text-brand     { color: var(--brand-600); }
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

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

/* ─── Layout Utilities ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container-narrow { max-width: 800px; }
.container-wide   { max-width: 1400px; }

.flex     { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap{ flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.flex-1 { flex: 1; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.hidden   { display: none !important; }
.sr-only  { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Spacing utilities */
.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}
.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}
.px-3{padding-inline:var(--space-3)}.px-4{padding-inline:var(--space-4)}.px-5{padding-inline:var(--space-5)}.px-6{padding-inline:var(--space-6)}
.py-2{padding-block:var(--space-2)}.py-3{padding-block:var(--space-3)}.py-4{padding-block:var(--space-4)}.py-6{padding-block:var(--space-6)}.py-8{padding-block:var(--space-8)}.py-12{padding-block:var(--space-12)}.py-16{padding-block:var(--space-16)}.py-20{padding-block:var(--space-20)}

.w-full { width: 100%; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── Responsive Grid ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .md\:grid-2 { grid-template-columns: 1fr; }
  .md\:flex-row { flex-direction: column; }
  .md\:hidden { display: none; }
  .container { padding-inline: var(--space-4); }
}

@media (min-width: 769px) {
  .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:flex-row { flex-direction: row; }
  .sm\:hidden { display: none; }
}

@media (min-width: 1024px) {
  .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: var(--radius-full); opacity: 0.3; }
::-webkit-scrollbar-thumb:hover { opacity: 0.5; }

/* ─── Animations ────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-fade     { animation: fadeIn var(--duration-normal) var(--ease-out) both; }
.animate-slide-up { animation: slideUp var(--duration-slow) var(--ease-out) both; }
.animate-slide-down { animation: slideDown var(--duration-normal) var(--ease-out) both; }
.animate-scale    { animation: scaleIn var(--duration-normal) var(--ease-out) both; }
.animate-float    { animation: float 4s ease-in-out infinite; }
.animate-pulse    { animation: pulse-soft 2s ease-in-out infinite; }
.animate-spin     { animation: spin 1s linear infinite; }

/* Stagger animation delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Scroll-triggered animations (JS adds .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Selection ─────────────────────────────────────────────────── */
::selection {
  background: var(--brand-200);
  color: var(--brand-900);
}

.dark ::selection {
  background: var(--brand-800);
  color: var(--brand-100);
}