/* Agency54 — Global Design System */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg-base:        #0a0a0f;
  --bg-surface:     #111118;
  --bg-card:        rgba(255, 255, 255, 0.04);
  --bg-card-hover:  rgba(255, 255, 255, 0.07);
  --bg-input:       rgba(255, 255, 255, 0.06);

  --text-primary:   #f0f0f8;
  --text-secondary: #9898b0;
  --text-muted:     #5a5a72;

  --accent-from:    #7c3aed;
  --accent-to:      #a855f7;
  --accent-solid:   #8b5cf6;
  --accent-glow:    rgba(139, 92, 246, 0.25);

  --danger:         #ef4444;
  --warning:        #f97316;
  --success:        #22c55e;
  --info:           #3b82f6;

  --border:         rgba(255, 255, 255, 0.08);
  --border-accent:  rgba(139, 92, 246, 0.4);

  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow:    0 0 24px rgba(139, 92, 246, 0.2);

  --sidebar-width:      240px;
  --sidebar-collapsed:  64px;
  --header-height:      60px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --font-heading: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

[data-theme="light"] {
  --bg-base:        #f4f4f8;
  --bg-surface:     #ffffff;
  --bg-card:        rgba(255, 255, 255, 0.9);
  --bg-card-hover:  rgba(255, 255, 255, 1);
  --bg-input:       rgba(0, 0, 0, 0.04);
  --text-primary:   #1a1a2e;
  --text-secondary: #4a4a6a;
  --text-muted:     #9898b0;
  --border:         rgba(0, 0, 0, 0.08);
  --shadow-card:    0 2px 16px rgba(0, 0, 0, 0.08);
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font: 400 clamp(15px, 1.1vw, 16px) / 1.6 var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent-solid); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1 { font: clamp(2rem, 5vw, 3.5rem) / 1.1 var(--font-heading); letter-spacing: 0.04em; }
h2 { font: clamp(1.5rem, 3vw, 2.5rem) / 1.1 var(--font-heading); }
h3 { font: clamp(1.2rem, 2vw, 1.8rem) / 1.2 var(--font-heading); }
h4 { font: 600 1.05rem / 1.4 var(--font-body); }

.mono, code, kbd  { font-family: var(--font-mono); font-size: 0.875em; }
.text-muted       { color: var(--text-muted); }
.text-secondary   { color: var(--text-secondary); }
.text-success     { color: var(--success); }
.text-danger      { color: var(--danger); }
.text-warning     { color: var(--warning); }

/* ── FOCUS STYLES ────────────────────────────────────────── */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); border-radius: 99px; }