/* OpsPay Institucional — design tokens
   Single source of truth · alinhado com docs/opspay-identity.md.
   Cherry é o único accent (RDN §1). */

:root {
  /* ── Brand ───────────────────────────────────────────────── */
  --cherry:       #C41E4A;
  --cherry-hov:   #E8245A;
  --cherry-lt:    #FF6B8A;
  --cherry-muted: #3D0A1A;
  --cherry-dim:   rgba(196,30,74,0.08);

  /* ── Neutros ─────────────────────────────────────────────── */
  --black:        #0A0A0A;
  --surface:      #141414;
  --elevated:     #1E1E1E;
  --border:       #2A2A2A;
  --border-sub:   #1F1F1F;
  --white:        #FFFFFF;
  --muted:        #A8A8A8;
  --faint:        #555555;

  /* ── Semantic ────────────────────────────────────────────── */
  --success:      #22C55E;
  --warning:      #F59E0B;
  --danger:       #EF4444;
  --info:         #60A5FA;

  /* ── Typography ──────────────────────────────────────────── */
  --sans:         'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:         'DM Mono', 'Courier New', monospace;

  --fs-display-1: clamp(48px, 7vw, 96px);   /* hero principal */
  --fs-display-2: clamp(40px, 5.5vw, 72px); /* secondary hero / section */
  --fs-h1:        clamp(32px, 4vw, 48px);
  --fs-h2:        clamp(24px, 3vw, 36px);
  --fs-h3:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-sm:        14px;
  --fs-xs:        12px;
  --fs-eyebrow:   11px;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-base:      1.5;
  --lh-relaxed:   1.65;

  --ls-display:   -2px;
  --ls-tight:     -0.5px;
  --ls-base:      0;
  --ls-eyebrow:   0.12em;

  /* ── Spacing scale ───────────────────────────────────────── */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-8:      32px;
  --space-10:     40px;
  --space-12:     48px;
  --space-16:     64px;
  --space-20:     80px;
  --space-24:     96px;
  --space-32:     128px;
  --space-40:     160px;
  --space-48:     192px;
  --space-56:     224px;
  --space-64:     256px;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.6);
  --shadow-cherry:0 0 0 1px rgba(196,30,74,0.4), 0 8px 24px rgba(196,30,74,0.18);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    160ms;
  --duration-base:    240ms;
  --duration-slow:    480ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --container:    1200px;
  --container-narrow: 880px;
  --container-wide:   1400px;
  --header-h:     80px;
  --header-h-shrunk: 64px;

  /* ── Brand asset URL prefix ──────────────────────────────── */
  --brand-cdn:    'https://octaimage.blob.core.windows.net/octaimage4ctnr/opspay-app';
}

/* Light/dark hints (institucional é sempre dark, mas reservamos pra futuro) */
@media (prefers-color-scheme: light) {
  /* Mantém dark intencionalmente. Marca OpsPay sempre opera em fundo escuro. */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}