/* Google Fonts loaded via HTML <link> tags for better performance */
/* See index.html head for font loading - removed @import to avoid blocking waterfall */

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

html,
body {
  /* clip prevents horizontal overflow without creating a scroll container,
     so position:sticky works correctly on nav and other elements */
  overflow-x: clip;
}

/* ==========================================================
   SQUR V4 Design Tokens - Single Source of Truth
   Change values here to restyle the entire site.
   ========================================================== */
:root {
  /* ─── Brand Colors ─── */
  --color-primary: #2bcdee;
  --color-primary-hover: #22b8d5;
  --color-rose: #ec5567;

  /* ─── Background ─── */
  --color-bg: #101f22;
  --color-bg-secondary: #162a2e;

  /* ─── Text ─── */
  --color-fg: #ffffff;
  --color-fg-secondary: #d1d5db;
  --color-fg-muted: #9ca3af;
  --color-muted: #64748b;

  /* ─── Extended Backgrounds ─── */
  --color-bg-deep: #0a1215;
  --color-bg-darker: #0c171a;
  --color-bg-card: #162a2e;
  --color-bg-card-solid: #162a2e;
  --color-bg-elevated: #1e3a40;
  --color-bg-btn: rgba(43, 205, 238, 0.1);
  --color-bg-btn-hover: rgba(43, 205, 238, 0.18);

  /* ─── Accent & Teal ─── */
  --color-teal: #4ed6d6;
  --color-accent: #2bcdee;
  --color-accent-dim: rgba(43, 205, 238, 0.6);
  --color-primary-light: rgba(43, 205, 238, 0.1);

  /* ─── Borders ─── */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(43, 205, 238, 0.2);
  --border-accent-bright: rgba(43, 205, 238, 0.35);
  --border-accent-strong: rgba(43, 205, 238, 0.4);

  /* ─── Glows & Shadows ─── */
  --glow-primary: rgba(43, 205, 238, 0.15);
  --glow-primary-strong: rgba(43, 205, 238, 0.25);
  --shadow-dark: rgba(0, 0, 0, 0.4);

  /* ─── Status ─── */
  --color-success: #00ff9d;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* ─── Typography ─── */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: "Montserrat", var(--font-body);
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  /* ─── Type Scale ─── */
  --text-xs: clamp(11px, 1.1vw, 12px);
  --text-sm: clamp(13px, 1.3vw, 14px);
  --text-base: clamp(14px, 1.5vw, 16px);
  --text-lg: clamp(16px, 1.7vw, 18px);
  --text-xl: clamp(18px, 2vw, 20px);
  --text-2xl: clamp(22px, 2.5vw, 28px);
  --text-3xl: clamp(30px, 4vw, 48px);

  /* ─── Line Heights ─── */
  --lh-body: 1.65;
  --lh-heading: 1.1;

  /* ─── Content Widths ─── */
  --content-narrow: 720px;
  --content-default: 1024px;
  --content-wide: 1280px;

  /* ─── Border Radius ─── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ─── Spacing ─── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;

  --space-2xl: clamp(32px, 4vw, 48px);
  --space-3xl: clamp(36px, 4.5vw, 60px);
  --space-4xl: clamp(48px, 6vw, 80px);

  /* ─── Spacing Aliases (legacy compat for styles-site.css) ─── */
  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-lg: var(--space-lg);

  /* ─── Effects ─── */
  --glow-spread: 24px;
  --glow-opacity: 0.08;
  --shadow-opacity: 0.5;
  --blur-header: 12px;
  --blur-card: 14px;
  --orb-opacity: 0.12;
  --orb-blur: 200px;
  --orb-duration: 12s;
  --orb-cyan: rgba(43, 205, 238, 0.25);
  --orb-teal: rgba(78, 214, 214, 0.15);
  --orb-rose: rgba(236, 85, 103, 0.1);
  --transition-speed: 300ms;
  /* ─── Zone Background Variables ─── */
  --zone-dark-bg: #0a1518;
  --zone-hero-gradient:
    radial-gradient(
      ellipse at 15% 60%,
      rgba(43, 205, 238, 0.1) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 85% 20%,
      rgba(78, 214, 214, 0.07) 0%,
      transparent 50%
    );
  --zone-gradient-overlay: radial-gradient(
    ellipse at 30% 60%,
    rgba(43, 205, 238, 0.06) 0%,
    transparent 50%
  );
  --zone-divider: linear-gradient(
    90deg,
    transparent,
    rgba(43, 205, 238, 0.2) 30%,
    rgba(78, 214, 214, 0.15) 70%,
    transparent
  );
}