/*
    ============================================================
      CJX STUDIOS — tokens.css  v3.0
      SINGLE SOURCE OF TRUTH — import FIRST on every page.
      No layout. No components. Only custom properties.

      Load order: tokens.css → base.css → index-page.css
    ============================================================
*/

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── TYPOGRAPHY ─────────────────────────────────── */
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;

  /* ── BACKGROUNDS ────────────────────────────────── */
  --bg: #090909;
  --bg-2: #101010;
  --bg-3: #181818;
  --bg-4: #1e1e1e;

  /* ── ACCENT — brand blue ─────────────────────────── */
  --accent: #2b66e6;
  --accent-hover: #1a4db0;
  --accent-light: #4d82f0;
  --accent-dim: rgba(43, 102, 230, 0.1);
  --accent-border: rgba(43, 102, 230, 0.22);
  --accent-glow: rgba(43, 102, 230, 0.28);

  /* ── WHATSAPP ────────────────────────────────────── */
  --wa: #25d366;
  --wa-hover: #1fb859;
  --wa-dim: rgba(37, 211, 102, 0.1);
  --wa-border: rgba(37, 211, 102, 0.22);

  /* ── AMBER — guarantee / trust moments only ──────── */
  --amber: #f59e0b;
  --amber-dim: rgba(245, 158, 11, 0.1);
  --amber-border: rgba(245, 158, 11, 0.25);
  --amber-glow: rgba(245, 158, 11, 0.28);

  /* ── FUNCTIONAL ──────────────────────────────────── */
  --green: #22c55e;
  --green-dim: rgba(34, 197, 94, 0.1);
  --green-border: rgba(34, 197, 94, 0.22);
  --red: #ef4444;
  --red-dim: rgba(239, 68, 68, 0.1);
  --red-border: rgba(239, 68, 68, 0.22);

  /* ── TEXT ────────────────────────────────────────── */
  --text: #f5f5f5;
  --text-2: #a0a0a0;
  --text-3: #666666;

  /* ── BORDERS ─────────────────────────────────────── */
  --border: rgba(255, 255, 255, 0.07);
  --border-2: rgba(255, 255, 255, 0.13);

  /* ── RADII ───────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* ── LAYOUT ──────────────────────────────────────── */
  --max-w: 1200px;
  --max-w-prose: 680px;

  /* ── Z-INDEX ─────────────────────────────────────── */
  --z-base: 1;
  --z-above: 10;
  --z-nav: 1000;
  --z-modal: 9000;
  --z-grain: 9998;

  /* ── EASING ──────────────────────────────────────── */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ── DURATION ────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;

  /* ── NAMED SHADOWS ───────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 40px 96px rgba(0, 0, 0, 0.55), 0 12px 32px rgba(0, 0, 0, 0.35);

  --blue-glow-sm: 0 4px 20px rgba(43, 102, 230, 0.3);
  --blue-glow-md: 0 8px 36px rgba(43, 102, 230, 0.38);
  --blue-glow-lg: 0 24px 72px rgba(43, 102, 230, 0.2);
  --wa-glow-sm: 0 4px 20px rgba(37, 211, 102, 0.3);
  --wa-glow-md: 0 8px 36px rgba(37, 211, 102, 0.4);

  /* ── BACKWARD-COMPAT ALIASES ──────────────────────── */
  --ink: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--bg-3);
  --border-l: var(--border-2);
  --glow: var(--blue-glow-sm);
}