/* ============================================
   FUGU — Shared base styles & tokens
   ============================================ */

:root {
  /* Brand */
  --blue-50:  #EEF3FF;
  --blue-100: #DCE6FF;
  --blue-200: #B8CCFF;
  --blue-300: #8AACFF;
  --blue-400: #5A87FF;
  --blue-500: #2E5BFF;   /* primary */
  --blue-600: #1E3FD1;
  --blue-700: #172FA0;
  --blue-800: #11236F;
  --blue-900: #0A1744;

  /* Neutrals — warm off-white paper */
  --paper:    #F6F5F1;
  --paper-2:  #EFEEE8;
  --paper-3:  #E6E4DC;
  --ink-900:  #0B0B0F;
  --ink-700:  #2A2A32;
  --ink-500:  #5A5A66;
  --ink-300:  #9A9AA6;

  /* Accents */
  --lime:     #D4FF3A;
  --danger:   #FF3B3B;
  --approved: #00B86B;
  --warning:  #D9A200;

  /* Type */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* --font-mono is now an alias for the sans stack — typewriter look removed
     site-wide. Where contrast was needed, jerarquy is recreated through
     font-weight + letter-spacing, not a different family. */
  --font-mono: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}

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

:root { color-scheme: light; }

html, body {
  /* Background managed by .aurora-backdrop (fixed, z-index 0).
     Keep paper as fallback color but allow aurora layer to show. */
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { overflow-x: clip; }
#root { min-height: 100vh; }
.app { background: transparent; }

body { cursor: none; }
@media (pointer: coarse) { body { cursor: auto; } }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: none; }

::selection { background: var(--blue-500); color: white; }

/* Custom cursor */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease-out-expo),
              height 0.25s var(--ease-out-expo),
              background 0.2s,
              border-color 0.2s;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: white;
  border-radius: 50%;
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 50%;
}
.cursor-ring.hover { width: 64px; height: 64px; border-color: white; }
.cursor-ring.drag  { width: 80px; height: 80px; border-color: var(--lime); mix-blend-mode: normal; }
.cursor-dot.drag   { background: var(--lime); mix-blend-mode: normal; }

/* App frame */
.app {
  min-height: 100vh;
  position: relative;
}

/* Direction switcher (custom toolbar) */
.direction-switcher {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex; align-items: center; gap: 6px;
  padding: 6px;
  background: rgba(11, 11, 15, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(246,245,241,0.6),
    0 20px 60px -10px rgba(0,0,0,0.5),
    0 4px 20px rgba(0,0,0,0.3);
}
.direction-switcher button {
  padding: 8px 18px;
  border-radius: 999px;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.3s var(--ease-out-expo);
  display: flex; align-items: center; gap: 8px;
}
.direction-switcher button:hover { color: white; }
.direction-switcher button.active {
  background: white;
  color: var(--ink-900);
}
.direction-switcher button .num {
  font-size: 9px;
  opacity: 0.5;
}
.direction-switcher button.active .num { opacity: 0.5; }

/* Utility */
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-display); }

/* Selection grid overlay (subtle for brutalist) */
.grid-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11,11,15,0.04) 1px, transparent 1px);
  background-size: calc(100vw / 12) 100%;
  z-index: 1;
}