/* ==========================================================================
   FILESTUDIO — Design System (1/4) : Tokens, Reset & Ambient Canvas
   Stratum-inspired Obsidian & Bento Aesthetic. 100% Client-side.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Clash Display — Montek Luxury Typography System */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Design tokens ---------- */
:root {
  --ink-900: #07080B;
  --ink-800: #0D0F15;
  --ink-700: #141720;
  --surface: #11131B;
  --surface-2: #181B26;
  --surface-3: #222636;
  
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.07);
  --line-3: rgba(255, 255, 255, 0.04);

  --accent: #6366F1;
  --accent-2: #818CF8;
  --accent-glow: rgba(99, 102, 241, 0.28);
  --rose: #F43F5E;
  --mint: #10B981;
  --gold: #F59E0B;
  --sky: #38BDF8;
  --danger: #EF4444;

  --text: #F8FAFC;
  --dim: #94A3B8;
  --mute: #64748B;

  --grad-brand: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 50%, #94A3B8 100%);
  --grad-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  --grad-glass: linear-gradient(175deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.01) 100%);
  --grad-accent: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --grad-card: linear-gradient(180deg, rgba(24, 27, 38, 0.85) 0%, rgba(17, 19, 27, 0.95) 100%);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-bento: 22px;
  --r-pill: 999px;

  --sh-1: 0 2px 10px rgba(0, 0, 0, 0.35);
  --sh-2: 0 16px 40px -12px rgba(0, 0, 0, 0.65);
  --sh-3: 0 30px 80px -25px rgba(0, 0, 0, 0.85);
  --sh-glow: 0 0 45px rgba(99, 102, 241, 0.22);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.16s;
  --t: 0.26s;
  --t-slow: 0.5s;

  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Clash Display', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'Cascadia Mono', Consolas, 'SFMono-Regular', ui-monospace, monospace;
  --wrap: 1200px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--text); text-decoration: none; transition: all var(--t-fast) var(--ease); }
a:hover { color: #fff; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--text);
}

p { margin: 0 0 0.85em; }
hr { border: 0; border-top: 1px solid var(--line-3); margin: 24px 0; }

::selection { background: rgba(99, 102, 241, 0.35); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); background-clip: content-box; }

/* ---------- 3. Ambient Obsidian Background ---------- */
.am-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 50% -12%, rgba(0, 229, 255, 0.08), transparent 70%),
    radial-gradient(900px 550px at 90% 35%, rgba(34, 240, 168, 0.06), transparent 70%),
    radial-gradient(1000px 700px at 10% 75%, rgba(0, 229, 255, 0.04), transparent 70%),
    #05070B;
}

.am-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
  will-change: transform;
}

.am-orb.o1 {
  width: 48vw; height: 48vw; left: -14vw; top: -16vw;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.22), transparent 70%);
  animation: amFloatA 38s var(--ease-soft) infinite alternate;
}

.am-orb.o2 {
  width: 42vw; height: 42vw; right: -12vw; top: 12vh;
  background: radial-gradient(circle, rgba(34, 240, 168, 0.2), transparent 70%);
  animation: amFloatB 46s var(--ease-soft) infinite alternate;
}

.am-orb.o3 {
  width: 36vw; height: 36vw; left: 30vw; bottom: -12vw;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.18), transparent 70%);
  animation: amFloatC 42s var(--ease-soft) infinite alternate;
}

.am-orb.o4 {
  width: 24vw; height: 24vw; right: 15vw; bottom: -5vw;
  opacity: 0.25;
  background: radial-gradient(circle, rgba(34, 240, 168, 0.24), transparent 70%);
  animation: amFloatA 32s var(--ease-soft) infinite alternate-reverse;
}

.am-dust { position: absolute; inset: 0; }
.am-dust i {
  position: absolute; display: block; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: amDrift linear infinite;
}

@keyframes amDrift {
  0% { transform: translate3d(0, 20px, 0) scale(0.6); opacity: 0; }
  15% { opacity: 0.45; }
  85% { opacity: 0.35; }
  100% { transform: translate3d(20px, -150px, 0) scale(1); opacity: 0; }
}

@keyframes amFloatA {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(5vw, 4vh, 0) scale(1.08); }
  100% { transform: translate3d(-3vw, 8vh, 0) scale(1.02); }
}

@keyframes amFloatB {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-6vw, 6vh, 0) scale(0.95); }
  100% { transform: translate3d(-2vw, -4vh, 0) scale(1.06); }
}

@keyframes amFloatC {
  0% { transform: translate3d(0, 0, 0) scale(0.96); }
  50% { transform: translate3d(4vw, -5vh, 0) scale(1.08); }
  100% { transform: translate3d(-5vw, -2vh, 0) scale(1); }
}

.am-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}