/* ============================================================
   CabralDjassi Studio — Design System Tokens
   Grounded in design.md: structured colors, fluid type,
   motion presets, spacing rhythm. Dark-first + light mode.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --brand-blue: #2563EB;
  --brand-blue-2: #38BDF8;
  --brand-cobalt: #1D4ED8;
  --brand-cyan: #38BDF8;
  --brand-mint: #00E5A0;
  --brand-pink: #7DD3FC;

  /* Signature gradient */
  --grad-brand: linear-gradient(135deg, #2563EB 0%, #38BDF8 42%, #7DD3FC 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(125,211,252,0.10));
  --grad-text: linear-gradient(120deg, #ECECF1 0%, #93C5FD 55%, #E0F2FE 100%);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 140ms;
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 520ms;
  --dur-menu: 380ms;

  /* ---- Radii ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Spacing rhythm ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Containers ---- */
  --container: 1240px;
  --container-narrow: 880px;
  --gutter: clamp(16px, 5vw, 40px);

  /* ---- Fluid type scale (clamp: mobile → desktop) ---- */
  --fs-display: clamp(2.6rem, 1.2rem + 6.6vw, 6rem);
  --fs-h1: clamp(2.1rem, 1.2rem + 4vw, 4rem);
  --fs-h2: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  --fs-h3: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---- Type families (overridable via Tweaks) ---- */
  --font-display: "Space Grotesk", "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-wide: 0.18em;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 12px 30px -10px rgba(0,0,0,0.5);
  --shadow-lg: 0 30px 70px -20px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 0 1px rgba(37,99,235,0.4), 0 20px 60px -15px rgba(37,99,235,0.45);

  /* ---- Z layers ---- */
  --z-bg: 0;
  --z-content: 1;
  --z-nav: 50;
  --z-menu: 60;
  --z-cursor: 90;
  --z-tweaks: 80;
}

/* ============================================================
   DARK THEME (default)
   ============================================================ */
:root,
[data-theme="dark"] {
  --bg: #08080C;
  --bg-2: #0C0C13;
  --surface: #121119;
  --surface-2: #181722;
  --surface-3: #20202D;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text: #ECECF1;
  --text-2: #A6A6B8;
  --text-muted: #6A6A7C;
  --primary: var(--brand-blue);
  --primary-hover: #60A5FA;
  --on-primary: #ffffff;
  --focus: #93C5FD;
  --glow: rgba(37,99,235,0.5);
  --dot: rgba(255,255,255,0.06);
  --noise-opacity: 0.04;
  --hero-veil: radial-gradient(900px 600px at 72% 18%, rgba(37,99,235,0.22), transparent 60%),
               radial-gradient(700px 500px at 12% 80%, rgba(56,189,248,0.12), transparent 60%);
  color-scheme: dark;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
  --bg: #F6F6F2;
  --bg-2: #EFEFEA;
  --surface: #FFFFFF;
  --surface-2: #FBFBF8;
  --surface-3: #F2F2EE;
  --border: rgba(12,12,22,0.10);
  --border-strong: rgba(12,12,22,0.18);
  --text: #0E0E16;
  --text-2: #4C4C5C;
  --text-muted: #86868F;
  --primary: var(--brand-blue);
  --primary-hover: #1D4ED8;
  --on-primary: #ffffff;
  --focus: #2563EB;
  --glow: rgba(37,99,235,0.28);
  --dot: rgba(12,12,22,0.06);
  --noise-opacity: 0.025;
  --shadow-md: 0 12px 30px -12px rgba(20,18,50,0.18);
  --shadow-lg: 0 30px 70px -22px rgba(20,18,50,0.22);
  --grad-text: linear-gradient(120deg, #15131f 0%, #1D4ED8 55%, #0369A1 100%);
  --hero-veil: radial-gradient(900px 600px at 72% 18%, rgba(37,99,235,0.16), transparent 60%),
               radial-gradient(700px 500px at 12% 80%, rgba(56,189,248,0.10), transparent 60%);
  color-scheme: light;
}