/* ================================================================
   Vaultria — Global CSS Variables & Reset
   Professional Language Workstation
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=DM+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap');

/* ── Base tokens ─────────────────────────────────────────────────── */
:root {
  /* Spacing */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   40px;
  --sp-2xl:  64px;

  /* Radii */
  --r-sm:    6px;
  --r-md:    12px;
  --r-lg:    20px;
  --r-full:  9999px;

  /* Transitions */
  --t-fast:  150ms ease;
  --t-base:  250ms ease;
  --t-slow:  450ms ease;
  --t-env:   700ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Typography */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;
  --font-ui:      'Inter', system-ui, sans-serif;

  /* Layout */
  --left-panel-width:   220px;
  --right-panel-width:  260px;
  --panel-collapsed-w:  56px;
  --header-height:      0px;   /* no top bar */
  --canvas-min-width:   480px;

  /* Z-index layers */
  --z-base:    1;
  --z-panel:   10;
  --z-overlay: 50;
  --z-modal:   100;
  --z-toast:   200;
}

/* ── Default theme (dark neutral — overridden by language themes) ── */
:root {
  --bg-base:        #0d0d0f;
  --bg-surface:     #141418;
  --bg-panel:       rgba(20, 20, 26, 0.92);
  --bg-glass:       rgba(255, 255, 255, 0.04);
  --bg-hover:       rgba(255, 255, 255, 0.06);
  --bg-active:      rgba(255, 255, 255, 0.10);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-normal:  rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.22);

  --text-primary:   rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-muted:     rgba(255, 255, 255, 0.28);
  --text-inverse:   rgba(0, 0, 0, 0.90);

  --accent-primary: #8b7cff;
  --accent-glow:    rgba(139, 124, 255, 0.20);
  --accent-dim:     rgba(139, 124, 255, 0.10);

  --success:        #4ade80;
  --success-glow:   rgba(74, 222, 128, 0.15);
  --error:          #f87171;
  --error-glow:     rgba(248, 113, 113, 0.15);
  --warning:        #fbbf24;

  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-track: transparent;
}

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

html {
  font-size: 16px;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-base);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button { cursor: pointer; }

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }

/* ── Scrollbar styling ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22);
}

/* ── Focus ring ──────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Utility classes ─────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  border: 1px solid var(--border-subtle);
}

.display-font {
  font-family: var(--font-display);
}

.mono-font {
  font-family: var(--font-mono);
}