/* =============================================================
   ROOT DESIGN TOKENS — mitsuki.gg
   ============================================================= */

:root {
  --black: #000000;
  --black-soft: #030303;
  --black-muted: #0b0b0b;
  --black-light: #070707;
  --black-lighter: #222222;
  --black-lightest: #252525;
  --black-a10: rgba(0, 0, 0, 0.1);
  --black-a15: rgba(0, 0, 0, 0.15);
  --black-a20: rgba(0, 0, 0, 0.2);
  --black-a25: rgba(0, 0, 0, 0.25);
  --black-a30: rgba(0, 0, 0, 0.3);
  --black-a35: rgba(0, 0, 0, 0.35);
  --black-a40: rgba(0, 0, 0, 0.4);
  --black-a50: rgba(0, 0, 0, 0.5);
  --black-a60: rgba(0, 0, 0, 0.6);
  --black-a70: rgba(0, 0, 0, 0.7);
  --black-a75: rgba(0, 0, 0, 0.75);
  --black-a80: rgba(0, 0, 0, 0.8);
  --black-a85: rgba(0, 0, 0, 0.85);
  --black-a90: rgba(0, 0, 0, 0.9);
  --black-a95: rgba(0, 0, 0, 0.95);
  --white: #ffffff;
  --white-soft: #f5f5f5;
  --white-muted: rgba(255, 255, 255, 0.85);
  --white-dim: rgba(255, 255, 255, 0.6);
  --white-faint: rgba(255, 255, 255, 0.15);
  --white-ghost: rgba(255, 255, 255, 0.05);
  --white-a02: rgba(255, 255, 255, 0.02);
  --white-a03: rgba(255, 255, 255, 0.03);
  --white-a04: rgba(255, 255, 255, 0.04);
  --white-a06: rgba(255, 255, 255, 0.06);
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a10: rgba(255, 255, 255, 0.1);
  --white-a12: rgba(255, 255, 255, 0.12);
  --white-a20: rgba(255, 255, 255, 0.2);
  --white-a30: rgba(255, 255, 255, 0.3);
  --white-a40: rgba(255, 255, 255, 0.4);
  --white-a50: rgba(255, 255, 255, 0.5);
  --white-a70: rgba(255, 255, 255, 0.7);
  --white-a75: rgba(255, 255, 255, 0.75);
  --white-a80: rgba(255, 255, 255, 0.8);
  --blue: #91e1ff;
  --blue-light: #b8ecff;
  --blue-bright: #6dd5ff;
  --blue-muted: #7ac4de;
  --blue-dark: #5ba8c2;
  --blue-dim: rgba(145, 225, 255, 0.25);
  --blue-faint: rgba(145, 225, 255, 0.1);
  --blue-glow: rgba(145, 225, 255, 0.4);
  --blue-a05: rgba(145, 225, 255, 0.05);
  --blue-a08: rgba(145, 225, 255, 0.08);
  --blue-a12: rgba(145, 225, 255, 0.12);
  --blue-a15: rgba(145, 225, 255, 0.15);
  --blue-a20: rgba(145, 225, 255, 0.2);
  --blue-a30: rgba(145, 225, 255, 0.3);
  --pink: #ff9ee4;
  --pink-light: #ffbfed;
  --pink-bright: #ff7dd8;
  --pink-muted: #e88bcc;
  --pink-dark: #d47ab8;
  --pink-darker: #b8689e;
  --pink-dim: rgba(255, 158, 228, 0.25);
  --pink-faint: rgba(255, 158, 228, 0.1);
  --pink-glow: rgba(255, 158, 228, 0.4);
  --pink-a05: rgba(255, 158, 228, 0.05);
  --pink-a08: rgba(255, 158, 228, 0.08);
  --pink-a12: rgba(255, 158, 228, 0.12);
  --pink-a15: rgba(255, 158, 228, 0.15);
  --pink-a20: rgba(255, 158, 228, 0.2);
  --pink-a30: rgba(255, 158, 228, 0.3);
  --purple: #a855f7;
  --purple-light: #c084fc;
  --purple-dark: #7c3aed;
  --purple-dim: rgba(168, 85, 247, 0.25);
  --purple-faint: rgba(168, 85, 247, 0.1);
  --purple-a15: rgba(168, 85, 247, 0.15);
  --purple-a30: rgba(168, 85, 247, 0.3);
  --gold: #FFD700;
  --gold-dark: #B8860B;
  --gold-dim: rgba(255, 215, 0, 0.25);
  --gold-faint: rgba(255, 215, 0, 0.1);
  --gold-a30: rgba(255, 215, 0, 0.3);
  --rank-gold: #FFD700;
  --rank-silver: #C0C0C0;
  --rank-bronze: #CD7F32;
  --warning: #f59e0b;
  --warning-light: #fbbf24;
  --warning-dark: #d97706;
  --warning-dim: rgba(245, 158, 11, 0.25);
  --warning-faint: rgba(245, 158, 11, 0.1);
  --warning-a15: rgba(245, 158, 11, 0.15);
  --warning-a30: rgba(245, 158, 11, 0.3);
  --danger: #ef4444;
  --danger-light: #f87171;
  --danger-dark: #dc2626;
  --danger-dim: rgba(239, 68, 68, 0.25);
  --danger-faint: rgba(239, 68, 68, 0.1);
  --danger-a12: rgba(239, 68, 68, 0.12);
  --danger-a15: rgba(239, 68, 68, 0.15);
  --danger-a20: rgba(239, 68, 68, 0.2);
  --danger-a30: rgba(239, 68, 68, 0.3);
  --success: #22c55e;
  --success-light: #4ade80;
  --success-dark: #16a34a;
  --success-dim: rgba(34, 197, 94, 0.25);
  --success-faint: rgba(34, 197, 94, 0.1);
  --success-a12: rgba(34, 197, 94, 0.12);
  --success-a15: rgba(34, 197, 94, 0.15);
  --success-a20: rgba(34, 197, 94, 0.2);
  --success-a30: rgba(34, 197, 94, 0.3);
  --discord: #5865f2;
  --discord-hover: #4752c4;
  --discord-dim: rgba(88, 101, 242, 0.2);
  --discord-a10: rgba(88, 101, 242, 0.1);
  --discord-a30: rgba(88, 101, 242, 0.3);
  --gradient-brand: linear-gradient(135deg, var(--blue), var(--pink));
  --gradient-brand-reverse: linear-gradient(135deg, var(--pink), var(--blue));
  --gradient-brand-horizontal: linear-gradient(90deg, var(--blue), var(--pink));
  --gradient-brand-vertical: linear-gradient(180deg, var(--pink), var(--blue));
  --gradient-glow-blue: radial-gradient(circle, var(--blue-glow) 0%, transparent 70%);
  --gradient-glow-pink: radial-gradient(circle, var(--pink-glow) 0%, transparent 70%);
  --font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hero: clamp(2.5rem, 5vw, 4.5rem);
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-2xs: 0.65rem;
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 2rem;
  --font-4xl: 2.5rem;
  --font-5xl: 3rem;
  --font-6xl: 4rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;
  --header-height: 70px;
  --sidebar-width: 280px;
  --border-thin: 1px;
  --border-normal: 2px;
  --border-thick: 3px;
  --border-chunky: 4px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-xs: 2px 2px 0;
  --shadow-sm: 3px 3px 0;
  --shadow-md: 4px 4px 0;
  --shadow-lg: 5px 5px 0;
  --shadow-xl: 6px 6px 0;
  --shadow-2xl: 8px 8px 0;
  --shadow-3xl: 10px 10px 0;
  --shadow-glow-pink: 0 0 20px var(--pink-dim), 0 0 40px var(--pink-faint);
  --shadow-glow-blue: 0 0 20px var(--blue-dim), 0 0 40px var(--blue-faint);
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-instant: 0.08s var(--ease-default);
  --transition-fast: 0.12s var(--ease-default);
  --transition-normal: 0.2s var(--ease-default);
  --transition-slow: 0.3s var(--ease-default);
  --transition-slower: 0.5s var(--ease-default);
  --blur-xs: 20px;
  --blur-sm: 40px;
  --blur-md: 60px;
  --blur-lg: 80px;
  --blur-xl: 100px;
  --backdrop-blur: blur(4px);
  --backdrop-blur-strong: blur(8px);
  --blob-opacity: 0.09;
  --blob-blur: var(--blur-md);
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-max: 9999;
  --btn-padding-sm: 0.4rem 0.8rem;
  --btn-padding-md: 0.6rem 1.2rem;
  --btn-padding-lg: 0.8rem 1.6rem;
  --scrollbar-width: 8px;
  --scrollbar-track: var(--black);
  --scrollbar-thumb: var(--black-lighter);
  --scrollbar-thumb-hover: var(--black-lightest);
  --fm-status-review: #60a5fa;
  --fm-status-withdrawn: #9ca3af;
  --fm-primary: var(--pink);
  --fm-secondary: var(--blue);
  --fm-bg: var(--black);
  --fm-bg-soft: var(--black-soft);
  --fm-bg-lighter: var(--black-lighter);
  --fm-bg-darker: var(--black-muted);
  --fm-text: var(--white);
  --fm-text-dim: var(--white-a70);
  --fm-text-faint: var(--white-a50);
  --fm-white: var(--white);
  --fm-white-dim: var(--white-a70);
  --fm-white-faint: var(--white-a10);
  --fm-font: var(--font-body);
  --fm-accent: var(--blue);
  --fm-accent-text: var(--white);
  --fm-accent-faint: var(--blue-a15);
  --fm-accent-shadow: var(--blue-a30);
  --fm-pending: var(--warning-light);
  --fm-review: var(--fm-status-review);
  --fm-accepted: var(--success);
  --fm-rejected: var(--danger);
  --fm-withdrawn: var(--fm-status-withdrawn);
  --fm-border: var(--white-a10);
  --fm-border-hover: var(--fm-primary);
  --fm-input-bg: var(--white-a06);
  --fm-input-hover: var(--white-a08);
  --fm-radius: var(--radius-lg);
  --fm-shadow: 6px 6px 0 var(--pink-a20);
  --fm-shadow-hover: 8px 8px 0 var(--pink-glow);
}

/* =============================================================
   RESET
   ============================================================= */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
}

html {
  background: var(--black);
  scroll-behavior: smooth;
}

/* =============================================================
   SCROLLBAR
   ============================================================= */

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  z-index: 9999;
}

::-webkit-scrollbar-track {
  background: var(--black);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--black-lighter);
  border-radius: 10px;
  border: 3px solid var(--black);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--white-faint);
}

::-webkit-scrollbar-corner {
  background: var(--black);
}

* {
  scrollbar-width: auto;
  scrollbar-color: var(--black-lighter) var(--black);
}