/*
  M&A Elo Profissional
  Minimal premium institutional tokens
*/

:root {
  /* Color: neutral editorial system */
  --color-paper: #F3EFE9;
  --color-paper-warm: #EBE5DB;
  --color-ink: #111111;
  --color-ink-soft: #262626;
  --color-ink-muted: #666666;
  --color-ink-faint: #999999;
  --color-night: #090909;
  --color-night-soft: #1A1A1A;
  --color-line: #D9D4CC;
  --color-line-dark: rgba(255, 255, 255, 0.12);
  --color-white: #FFFFFF;
  --color-copper: #B87B51;
  --color-copper-soft: #D99C73;
  --color-green: #1F362C;
  --color-steel: #485258;
  --color-signal: #2C5648;
  --color-charcoal: #1C2022;
  --color-concrete: #4A4E52;
  --color-industrial-line: #2E3235;

  /* Backward-compatible aliases */
  --color-bg-primary: var(--color-paper);
  --color-bg-secondary: var(--color-night);
  --color-bg-surface: var(--color-paper-warm);
  --color-bg-elevated: var(--color-white);
  --color-accent-copper: var(--color-copper);
  --color-accent-light: var(--color-copper-soft);
  --color-accent-green: var(--color-green);
  --color-text-primary: var(--color-ink);
  --color-text-secondary: var(--color-ink-muted);
  --color-text-muted: var(--color-ink-faint);
  --color-border: var(--color-line);
  --color-divider: var(--color-line);
  --color-black-soft: var(--color-night);

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Type scale — editorial industrial */
  --text-hero: clamp(64px, 9vw, 152px);
  --text-h1: clamp(56px, 7.2vw, 124px);
  --text-h2: clamp(38px, 4.2vw, 68px);
  --text-h3: clamp(26px, 2.5vw, 42px);
  --text-body: clamp(16px, 1.05vw, 19px);
  --text-small: clamp(12px, 0.9vw, 14px);
  --text-micro: 11px;
  --text-label: 12.5px;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line height */
  --leading-tight: 0.86;
  --leading-heading: 0.96;
  --leading-body: 1.65;
  --leading-small: 1.45;

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 88px;
  --space-5xl: 104px;
  --space-6xl: 132px;

  /* Layout */
  --container: 1480px;
  --container-narrow: 1240px;
  --container-readable: 760px;
  --page-gutter: clamp(22px, 4vw, 78px);
  --topbar-height: 0px;
  --nav-height: 84px;

  /* Radius and effects */
  --radius-none: 0;
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.12);
  --shadow-subtle: var(--shadow-lg);
  --shadow-deep: 0 42px 130px rgba(0, 0, 0, 0.24);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-precision: cubic-bezier(0.83, 0, 0.17, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 620ms;
  --duration-cinematic: 1200ms;
  --duration-ambient: 8000ms;
  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Cinematic gradients */
  --gradient-copper-glow: radial-gradient(circle at 50% 50%, rgba(184, 123, 81, 0.32) 0%, rgba(184, 123, 81, 0) 60%);
  --gradient-copper-rim: linear-gradient(135deg, rgba(184, 123, 81, 0.18) 0%, rgba(184, 123, 81, 0) 38%, rgba(184, 123, 81, 0) 62%, rgba(217, 156, 115, 0.12) 100%);
  --gradient-cream-warm: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-warm) 100%);
  --gradient-dark-cinematic: radial-gradient(120% 80% at 50% 0%, rgba(28, 32, 34, 0.95) 0%, rgba(9, 9, 9, 1) 60%);
  --gradient-mesh-ambient: radial-gradient(60% 40% at 18% 18%, rgba(184, 123, 81, 0.06) 0%, rgba(184, 123, 81, 0) 60%), radial-gradient(50% 35% at 82% 78%, rgba(72, 82, 88, 0.05) 0%, rgba(72, 82, 88, 0) 60%);
  --gradient-hero-shade: linear-gradient(95deg, rgba(9, 9, 9, 0.78) 0%, rgba(9, 9, 9, 0.48) 42%, rgba(9, 9, 9, 0.12) 78%, rgba(9, 9, 9, 0) 100%), linear-gradient(180deg, rgba(9, 9, 9, 0) 30%, rgba(9, 9, 9, 0.55) 100%);
  --gradient-hero-copper-tint: radial-gradient(80% 80% at 12% 50%, rgba(184, 123, 81, 0.14) 0%, rgba(184, 123, 81, 0) 60%);

  /* Glow / luminance */
  --glow-copper-soft: 0 0 0 1px rgba(184, 123, 81, 0.22), 0 8px 32px rgba(184, 123, 81, 0.14);
  --glow-copper-intense: 0 0 0 1px rgba(184, 123, 81, 0.36), 0 12px 48px rgba(184, 123, 81, 0.28);
  --glow-cream-soft: 0 0 0 1px rgba(243, 239, 233, 0.4), 0 8px 32px rgba(243, 239, 233, 0.16);

  /* Depth (Linear-style elevation) */
  --depth-1: 0 1px 2px rgba(15, 12, 8, 0.04), 0 1px 4px rgba(15, 12, 8, 0.06);
  --depth-2: 0 2px 6px rgba(15, 12, 8, 0.06), 0 8px 24px rgba(15, 12, 8, 0.08);
  --depth-3: 0 4px 12px rgba(15, 12, 8, 0.08), 0 16px 48px rgba(15, 12, 8, 0.12), 0 1px 0 rgba(184, 123, 81, 0.06);
  --depth-4: 0 8px 24px rgba(15, 12, 8, 0.12), 0 32px 80px rgba(15, 12, 8, 0.18), 0 2px 0 rgba(184, 123, 81, 0.08);

  /* Blur */
  --blur-subtle: blur(8px);
  --blur-glass: blur(20px) saturate(1.4);
  --blur-cinematic: blur(48px) saturate(1.6);

  /* Grain / noise texture — Stripe-grade subtle film grain */
  --texture-grain: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Layers */
  --z-base: 1;
  --z-ambient: 2;
  --z-elevated: 10;
  --z-cursor: 90;
  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
  --z-scroll-progress: 400;

  /* ───────────────────────────────────────────────────────────
     LOGO DESIGN SYSTEM — derivado da identidade visual M&A Elo
     (M&A sans bold preto · ELO PROFISSIONAL sans light cinza ·
      faísca laranja viva · engrenagem cinza · papel institucional)
     ─────────────────────────────────────────────────────────── */

  /* Faísca laranja — accent primário (a "faísca" da execução técnica) */
  --accent-spark: #E65100;
  --accent-spark-soft: #FF7A1A;
  --accent-spark-glow: rgba(230, 81, 0, 0.18);
  --accent-spark-tint: rgba(230, 81, 0, 0.08);

  /* Azul navy da logo M&A Elo (cor do wordmark "M&A") */
  --accent-navy: #1B2A4E;
  --accent-navy-soft: #2A3D6B;
  --accent-navy-glow: rgba(27, 42, 78, 0.18);
  --accent-navy-tint: rgba(27, 42, 78, 0.06);
  --accent-navy-bright: #3B5BA5;

  /* Preto industrial "M&A" — mais profundo que --color-ink */
  --color-ink-deep: #0a0a0a;
  --color-ink-neutral: #525252;     /* cinza engrenagem · texto lead */
  --color-ink-mute: #737373;        /* cinza secundário · metadata */

  /* Radii iOS-style */
  --radius-pill-xl: 12px;           /* pills + cards pequenos */
  --radius-card: 16px;              /* cards padrão */
  --radius-card-lg: 20px;           /* cards featured/hero */
  --radius-screen: 32px;            /* iPhone screen lower corners */

  /* Spring iOS */
  --ease-ios: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-ios: 380ms;

  /* Gradient cream warm para .hero--screen e .screen-section */
  --gradient-hero-cream:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255, 209, 168, 0.55), transparent 65%),
    radial-gradient(ellipse 90% 60% at 50% 115%, rgba(230, 81, 0, 0.22), transparent 70%),
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.6), transparent 45%),
    radial-gradient(circle at 82% 32%, rgba(255, 235, 215, 0.5), transparent 45%),
    linear-gradient(180deg, #FAF6F1 0%, #F5EFE7 50%, #ECD9C2 100%);

  /* Gradient subtil para secções intermédias (menos intenso que hero) */
  --gradient-section-cream:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 225, 200, 0.28), transparent 60%),
    linear-gradient(180deg, #FAF6F1 0%, #F5EFE7 100%);

  /* Shadows iOS — soft, neutras, sem tint copper */
  --shadow-ios-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-ios-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-ios-pill: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-ios-cta: 0 10px 28px rgba(10, 10, 10, 0.18), 0 2px 6px rgba(10, 10, 10, 0.08);

  /* Glow faísca (para hover de elementos com accent laranja) */
  --glow-spark-soft: 0 0 0 1px rgba(230, 81, 0, 0.18), 0 8px 24px rgba(230, 81, 0, 0.18);
  --glow-spark-intense: 0 0 0 1px rgba(230, 81, 0, 0.32), 0 12px 36px rgba(230, 81, 0, 0.28);
}