/* ═══════════════════════════════════════════════════════════
   GhostRoom — Design Tokens
   ═══════════════════════════════════════════════════════════
   Single source of truth for all design values.
   Every HTML page in the design system imports this file.

   Token naming: --gr-{category}-{name}
   Categories: color, text, bg, border, radius, space, shadow, glass
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════
   DARK THEME (default)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds ── */
  --gr-bg-base: #08080a;
  --gr-bg-raised: #0c0c10;
  --gr-bg-surface: #18181d;
  --gr-bg-elevated: #1f1f26;

  /* ── Text ── */
  --gr-text-primary: #ffffff;
  --gr-text-secondary: #eceae7;
  --gr-text-tertiary: #8a8780;
  --gr-text-muted: #5a5752;
  --gr-text-disabled: #3d3b37;

  /* ── Borders ── */
  --gr-border-subtle: rgba(255, 255, 255, 0.06);
  --gr-border-default: rgba(255, 255, 255, 0.12);
  --gr-border-strong: rgba(255, 255, 255, 0.2);

  /* ── Accent: Emerald ── */
  --gr-accent-green: #10b981;
  --gr-accent-green-glow: #34d399;
  --gr-accent-green-pressed: #059669;
  --gr-accent-green-subtle: rgba(16, 185, 129, 0.12);

  /* ── Accent: Indigo ── */
  --gr-accent-indigo: #6366f1;
  --gr-accent-indigo-glow: #818cf8;
  --gr-accent-indigo-subtle: rgba(99, 102, 241, 0.12);

  /* ── Accent: Orange ── */
  --gr-accent-orange: #f97316;
  --gr-accent-orange-subtle: rgba(249, 115, 22, 0.12);

  /* ── Semantic: Error ── */
  --gr-accent-error: #ef4444;
  --gr-accent-error-glow: #f87171;
  --gr-accent-error-subtle: rgba(239, 68, 68, 0.12);

  /* ── Border Radius ── */
  --gr-radius-sm: 4px;
  --gr-radius-md: 8px;
  --gr-radius-lg: 12px;
  --gr-radius-xl: 16px;
  --gr-radius-2xl: 20px;
  --gr-radius-3xl: 24px;
  --gr-radius-full: 9999px;

  /* ── Spacing (4px base) ── */
  --gr-space-1: 4px;
  --gr-space-2: 8px;
  --gr-space-3: 12px;
  --gr-space-4: 16px;
  --gr-space-5: 20px;
  --gr-space-6: 24px;
  --gr-space-8: 32px;
  --gr-space-10: 40px;
  --gr-space-12: 48px;
  --gr-space-16: 64px;

  /* ── Glass Material ── */
  --gr-glass-subtle-bg: rgba(255, 255, 255, 0.03);
  --gr-glass-subtle-blur: blur(16px) saturate(150%);
  --gr-glass-subtle-border: rgba(255, 255, 255, 0.06);
  --gr-glass-subtle-specular: rgba(255, 255, 255, 0.03);

  --gr-glass-default-bg: rgba(255, 255, 255, 0.06);
  --gr-glass-default-blur: blur(24px) saturate(160%);
  --gr-glass-default-border: rgba(255, 255, 255, 0.1);
  --gr-glass-default-specular: rgba(255, 255, 255, 0.06);

  --gr-glass-prominent-bg: rgba(255, 255, 255, 0.1);
  --gr-glass-prominent-blur: blur(32px) saturate(180%);
  --gr-glass-prominent-border: rgba(255, 255, 255, 0.15);
  --gr-glass-prominent-specular: rgba(255, 255, 255, 0.1);

  /* ── Typography ── */
  --gr-font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --gr-font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;

  /* ── Ambient Gradient Mesh ── */
  --gr-ambient-mesh: radial-gradient(
      ellipse 600px 400px at 15% 10%,
      rgba(16, 185, 129, 0.06) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 500px 500px at 85% 20%,
      rgba(99, 102, 241, 0.04) 0%,
      transparent 100%
    );
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"],
.theme-light {
  --gr-bg-base: #f5f5f0;
  --gr-bg-raised: #ffffff;
  --gr-bg-surface: #ebebeb;
  --gr-bg-elevated: #e0e0db;

  --gr-text-primary: #111111;
  --gr-text-secondary: #333330;
  --gr-text-tertiary: #666660;
  --gr-text-muted: #999990;
  --gr-text-disabled: #bbbbb5;

  --gr-border-subtle: rgba(0, 0, 0, 0.08);
  --gr-border-default: rgba(0, 0, 0, 0.13);
  --gr-border-strong: rgba(0, 0, 0, 0.22);

  --gr-accent-green: #059669;
  --gr-accent-green-glow: #047857;
  --gr-accent-green-pressed: #047857;
  --gr-accent-green-subtle: rgba(5, 150, 105, 0.1);

  --gr-accent-indigo: #4f46e5;
  --gr-accent-indigo-glow: #4338ca;
  --gr-accent-indigo-subtle: rgba(79, 70, 229, 0.1);

  --gr-accent-error: #dc2626;
  --gr-accent-error-glow: #b91c1c;
  --gr-accent-error-subtle: rgba(220, 38, 38, 0.1);

  --gr-glass-subtle-bg: rgba(255, 255, 255, 0.6);
  --gr-glass-subtle-blur: blur(20px) saturate(150%);
  --gr-glass-subtle-border: rgba(0, 0, 0, 0.06);
  --gr-glass-subtle-specular: rgba(255, 255, 255, 0.8);

  --gr-glass-default-bg: rgba(255, 255, 255, 0.75);
  --gr-glass-default-blur: blur(24px) saturate(160%);
  --gr-glass-default-border: rgba(0, 0, 0, 0.08);
  --gr-glass-default-specular: rgba(255, 255, 255, 0.9);

  --gr-glass-prominent-bg: rgba(255, 255, 255, 0.9);
  --gr-glass-prominent-blur: blur(32px) saturate(180%);
  --gr-glass-prominent-border: rgba(0, 0, 0, 0.1);
  --gr-glass-prominent-specular: rgba(255, 255, 255, 0.95);

  --gr-ambient-mesh: radial-gradient(
      ellipse 600px 400px at 15% 10%,
      rgba(5, 150, 105, 0.07) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 500px 500px at 85% 20%,
      rgba(79, 70, 229, 0.05) 0%,
      transparent 100%
    );
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════
   Mobile-first approach. Use min-width media queries.

   --gr-bp-sm:  640px   — Large phones / landscape
   --gr-bp-md:  768px   — Tablets portrait
   --gr-bp-lg:  1024px  — Tablets landscape / small laptops
   --gr-bp-xl:  1280px  — Desktops (current default layout)
   --gr-bp-2xl: 1536px  — Large desktops

   Layout tiers:
     Compact   (<768px)  — single column, drawer navigation
     Medium    (768–1279px) — collapsible sidebar, adaptive panels
     Expanded  (≥1280px) — full sidebar, all panels visible

   CSS custom properties cannot be used in media queries,
   so use the raw pixel values:
     @media (min-width: 768px)  { … }   tablet+
     @media (min-width: 1024px) { … }   laptop+
     @media (min-width: 1280px) { … }   desktop+
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Layout tokens — adjust per breakpoint */
  --gr-sidebar-width: 280px;
  --gr-panel-width: 280px;
  --gr-topbar-height: 48px;
  --gr-composer-height: 61px;
}

/* ═══════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════ */
body {
  font-family: var(--gr-font-family);
  background: var(--gr-bg-base);
  color: var(--gr-text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient gradient mesh — applied to body */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--gr-ambient-mesh);
  pointer-events: none;
  z-index: 0;
}