/* Giamix Design System — 8px grid, monochrome + lime accent */

:root {
  /* Spacing (8px base) */
  --space-0: 0;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;

  /* Surfaces */
  --gx-bg: #080a08;
  --gx-bg-elevated: #0c0e0c;
  --gx-surface: rgba(255, 255, 255, 0.035);
  --gx-surface-hover: rgba(255, 255, 255, 0.06);
  --gx-border: rgba(255, 255, 255, 0.08);
  --gx-border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --gx-text-primary: #fafafa;
  --gx-text-secondary: rgba(250, 250, 250, 0.62);
  --gx-text-tertiary: rgba(250, 250, 250, 0.42);

  /* Accent — single brand color */
  --gx-lime: #c8f031;
  --gx-lime-muted: rgba(200, 240, 49, 0.12);
  --gx-lime-border: rgba(200, 240, 49, 0.28);

  /* Radius */
  --gx-radius-sm: 8px;
  --gx-radius-md: 12px;
  --gx-radius-lg: 16px;
  --gx-radius-xl: 20px;

  /* Motion */
  --gx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gx-duration-fast: 150ms;
  --gx-duration-normal: 250ms;
  --gx-duration-slow: 450ms;

  /* Focus */
  --gx-focus-ring: 0 0 0 2px var(--gx-bg), 0 0 0 4px rgba(200, 240, 49, 0.5);

  /* Typography scale */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.875rem, 4vw, 2.5rem);
  --leading-tight: 1.15;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.035em;
  --tracking-normal: -0.011em;
}

/* Global focus — accessible, premium */
.gx-app :focus-visible,
.gx-home :focus-visible,
.editor-body :focus-visible {
  outline: none;
  box-shadow: var(--gx-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}