/* ==========================================================================
   variables.css — CLONBRU design system tokens
   ========================================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --color-bg: #050807;
  --color-bg-2: #0a100d;
  --color-surface: #0e1713;
  --color-surface-hover: #132019;

  /* ---- Color: brand ---- */
  --color-green: #39ff88;
  --color-green-deep: #0e7a4b;
  --color-pink: #ff3cac;
  --color-pink-soft: #ff72c6;

  /* ---- Color: text ---- */
  --color-text: #f5f7f6;
  --color-text-2: #a4ada8;
  --color-muted: #6f7974;

  /* ---- Color: lines ---- */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-border-green: rgba(57, 255, 136, 0.34);
  --color-border-pink: rgba(255, 60, 172, 0.32);

  /* ---- Gradients & glows ---- */
  --gradient-brand: linear-gradient(100deg, var(--color-green) 0%, var(--color-pink-soft) 100%);
  --gradient-line: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-border-strong) 30%,
    var(--color-border-strong) 70%,
    transparent 100%
  );
  --glow-green: 0 0 0 1px rgba(57, 255, 136, 0.22), 0 18px 60px -24px rgba(57, 255, 136, 0.42);
  --glow-pink: 0 0 0 1px rgba(255, 60, 172, 0.2), 0 18px 60px -24px rgba(255, 60, 172, 0.36);

  /* ---- Typography ---- */
  --font-sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.75rem, 9.2vw, 7rem);
  --fs-h1: clamp(2.35rem, 7.2vw, 5rem);
  --fs-h2: clamp(1.9rem, 5.1vw, 3.5rem);
  --fs-h3: clamp(1.3rem, 3vw, 1.85rem);
  --fs-h4: clamp(1.08rem, 2.1vw, 1.3rem);
  --fs-lead: clamp(1.02rem, 1.6vw, 1.3rem);
  --fs-body: clamp(0.96rem, 1.1vw, 1.05rem);
  --fs-small: 0.875rem;
  --fs-label: 0.688rem;

  --tracking-display: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-label: 0.22em;

  /* ---- Spacing ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.25rem;
  --space-2xl: clamp(3.5rem, 7vw, 6rem);
  --space-section: clamp(4.5rem, 11vw, 9.5rem);

  /* ---- Layout ---- */
  --container-width: 1280px;
  --container-wide: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 62ch;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 18px 44px -28px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 40px 90px -50px rgba(0, 0, 0, 1);

  /* ---- Motion ---- */
  --transition-fast: 160ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 640ms cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-sticky: 60;
  --z-header: 80;
  --z-menu: 90;
  --z-cursor: 100;
  --z-loader: 120;

  /* Breakpoints (reference only — media queries can't use vars)
     sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1440px */
}