/* ==========================================================================
   LUDATOR GAME STUDIO - Minimal Editorial Design System
   Pure, Swiss-Inspired, High-End Game Atelier Aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg: #09090b;
  --bg-subtle: #111114;
  --bg-card: #141418;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.2);
  --text-main: #f4f4f6;
  --text-muted: #8b8b96;
  --text-dim: #52525c;
  --accent: #b66b19;
  --accent-light: #d97706;
}

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

html {
  background-color: var(--bg);
  color: var(--text-main);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  overflow-x: hidden;
}

/* Subtle editorial grid line */
.hairline-b {
  border-bottom: 1px solid var(--border);
}

.hairline-t {
  border-top: 1px solid var(--border);
}

.hairline-l {
  border-left: 1px solid var(--border);
}

.hairline-r {
  border-right: 1px solid var(--border);
}

.hairline-all {
  border: 1px solid var(--border);
}

/* Typography styles */
.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.font-heading {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  letter-spacing: -0.03em;
}

/* Interactive Project Row */
.project-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover {
  background: var(--bg-card);
  border-color: var(--border-hover);
}

/* Minimal Vector Blueprint Visuals */
.blueprint-box {
  background: #0d0d10;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.blueprint-grid {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Custom Minimalist Buttons */
.btn-minimal {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.btn-minimal:hover {
  border-color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
}

.btn-accent {
  background: var(--accent);
  color: #09090b;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-accent:hover {
  background: var(--accent-light);
  color: #000;
}

/* Language Switcher */
.lang-btn {
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.lang-btn.active {
  color: var(--text-main);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Input Fields */
input, textarea {
  background: #0d0d10;
  border: 1px solid var(--border);
  color: var(--text-main);
  transition: border-color 0.2s ease;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--text-main);
}