/* ============================================
 * Design System Tokens — JuriConnex v1.0
 * ============================================ */

:root {
  /* === Light theme (default) === */
  --bg-page: #FFFFFF;
  --bg-warm: #F8F7F9;
  --bg-elevated: #FAFAF9;
  --surface-card: #FFFFFF;
  --surface-glass: rgba(255, 255, 255, 0.7);

  --border: #E5E5E0;
  --border-light: #EFEEEA;

  --text-primary: #0F0F0E;
  --text-secondary: #5A5A56;
  --text-muted: #8A8A84;

  --brand-primary: #2563EB;
  --brand-primary-hover: #1D4ED8;
  --brand-subtle: #EFF4FF;
  --brand-border: #BFCFFA;
  --accent-glow: #0EA5E9;

  --success: #16A34A;
  --success-bg: #F0FDF4;
  --success-border: #BBF7D0;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --warning-border: #FDE68A;
  --error: #DC2626;
  --error-bg: #FEF2F2;

  --shadow-card: 0 1px 3px rgba(15, 15, 14, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(15, 15, 14, 0.08);
  --shadow-glow-brand: 0 0 24px rgba(37, 99, 235, 0.15);

  /* === Easing tokens === */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.5, 0, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Duration tokens === */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-medium: 600ms;
  --duration-slow: 1000ms;
  --duration-loop-marquee: 40s;
  --duration-loop-beam: 8s;
  --duration-loop-pulse: 3s;
  --duration-loop-float: 6s;

  /* === Spacing tokens === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* === Border radius === */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* === Containers === */
  --container-xl: 1280px;
  --container-lg: 1120px;
  --container-md: 960px;
  --container-sm: 720px;
  --container-xs: 560px;

  /* === Photo tokens (subatomic — Uma) === */
  --photo-filter: sepia(0.12) contrast(1.04) brightness(0.97) saturate(0.92);
  --photo-overlay-light: linear-gradient(180deg, rgba(248, 247, 249, 0) 0%, rgba(248, 247, 249, 0.55) 100%);
  --photo-overlay-light-strong: linear-gradient(180deg, rgba(248, 247, 249, 0.45) 0%, rgba(248, 247, 249, 0.92) 100%);
  --photo-overlay-dark: linear-gradient(180deg, rgba(10, 13, 19, 0.35) 0%, rgba(10, 13, 19, 0.85) 100%);
  --photo-overlay-side: linear-gradient(90deg, rgba(248, 247, 249, 0.85) 0%, rgba(248, 247, 249, 0) 60%);
  --photo-ratio-portrait: 4 / 5;
  --photo-ratio-detail: 3 / 4;
  --photo-ratio-wide: 16 / 9;
  --photo-ratio-strip: 21 / 9;
}

html.dark {
  /* === Dark theme — WARM LEATHER (Brad opção 2) ===
     Tons de couro envelhecido, charcoal quente, papel sépia.
     Substitui o "dark techy" #0A0D13 (Vercel/Linear) por estética
     premium law firm. Brand blue mantido como acento frio que pop. */
  --bg-page: #1A1410;
  --bg-warm: #221A14;
  --bg-elevated: rgba(245, 235, 220, 0.025);
  --surface-card: rgba(245, 235, 220, 0.035);
  --surface-glass: rgba(26, 20, 16, 0.78);

  --border: #2D241D;
  --border-light: #382B22;

  --text-primary: #F5EFE3;
  --text-secondary: #B8A99A;
  --text-muted: #7D7166;

  --brand-primary: #6FA8FF;
  --brand-primary-hover: #4F90FF;
  --brand-subtle: #1F2A40;
  --brand-border: #2A4280;
  --accent-glow: #0EA5E9;

  --success: #4ADE80;
  --success-bg: rgba(74, 222, 128, 0.08);
  --success-border: rgba(74, 222, 128, 0.25);
  --warning: #FBBF24;
  --warning-bg: rgba(251, 191, 36, 0.08);
  --warning-border: rgba(251, 191, 36, 0.25);
  --error: #F87171;
  --error-bg: rgba(248, 113, 113, 0.08);

  --shadow-card: 0 0 0 1px rgba(245, 235, 220, 0.04);
  --shadow-card-hover: 0 0 0 1px rgba(245, 235, 220, 0.08), 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow-brand: 0 0 32px rgba(111, 168, 255, 0.22);

  /* Photo treatment dark — mais saturado, mais contraste, mais escuro */
  --photo-filter: sepia(0.18) contrast(1.08) brightness(0.72) saturate(0.85);
  --photo-overlay-light: linear-gradient(180deg, rgba(10, 13, 19, 0) 0%, rgba(10, 13, 19, 0.65) 100%);
  --photo-overlay-light-strong: linear-gradient(180deg, rgba(10, 13, 19, 0.55) 0%, rgba(10, 13, 19, 0.92) 100%);
  --photo-overlay-side: linear-gradient(90deg, rgba(10, 13, 19, 0.85) 0%, rgba(10, 13, 19, 0) 60%);
}