/* ============================================================
   DESIGN TOKENS — Asimov Work Hub (Light)
   Tema padrão da landing page e do design system.
   ============================================================ */
:root {
  /* --- Backgrounds --- */
  --bg-page:        #f4f6fa;
  --bg-card:        #ffffff;
  --bg-elevated:    #eef1f7;
  --bg-overlay:     rgba(244, 246, 250, 0.92);

  /* --- Surfaces (alpha layers) --- */
  --surface-1:      rgba(0,0,0,0.03);
  --surface-2:      rgba(0,0,0,0.06);
  --surface-3:      rgba(0,0,0,0.10);
  --surface-4:      rgba(0,0,0,0.15);

  /* --- Borders --- */
  --border-subtle:  rgba(0,0,0,0.05);
  --border-default: rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.20);
  --border-focus:   #0891b2;

  /* --- Text --- */
  --text-primary:   #111827;
  --text-secondary: #4b5563;
  --text-muted:     #9ca3af;
  --text-inverse:   #f4f6fa;
  --text-link:      #0891b2;

  /* --- Brand / Accent (mais escuro p/ contraste no fundo claro) --- */
  --accent:         #0891b2;
  --accent-light:   #0e7490;
  --accent-dark:    #164e63;
  --accent-bg:      rgba(8, 145, 178, 0.10);
  --accent-border:  rgba(8, 145, 178, 0.30);
  --accent-glow:    rgba(8, 145, 178, 0.18);

  /* --- Semânticas — mantidas iguais ao dark (não sobrescritas) --- */
  --success:        #22d473;
  --success-light:  #4ade80;
  --success-bg:     rgba(34, 212, 115, 0.10);
  --success-border: rgba(34, 212, 115, 0.30);

  --error:          #f43f5e;
  --error-light:    #fb7185;
  --error-bg:       rgba(244, 63, 94, 0.10);
  --error-border:   rgba(244, 63, 94, 0.30);

  --warning:        #f59e0b;
  --warning-light:  #fbbf24;
  --warning-bg:     rgba(245, 158, 11, 0.10);
  --warning-border: rgba(245, 158, 11, 0.30);

  --info:           #38bdf8;
  --info-light:     #67d0fb;
  --info-bg:        rgba(56, 189, 248, 0.10);
  --info-border:    rgba(56, 189, 248, 0.30);

  /* --- Typography --- */
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', monospace;

  --size-display:   clamp(48px, 7vw, 64px);
  --size-h1:        clamp(36px, 5vw, 48px);
  --size-h2:        clamp(28px, 4vw, 36px);
  --size-h3:        24px;
  --size-h4:        18px;
  --size-body-l:    18px;
  --size-body-m:    16px;
  --size-body-s:    15px;
  --size-caption:   13px;
  --size-label:     12px;
  --size-code:      14px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --lh-tight:       1.1;
  --lh-snug:        1.3;
  --lh-normal:      1.5;
  --lh-relaxed:     1.65;

  /* --- Spacing (4px base) --- */
  --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;

  /* --- Border Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  28px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg:   0 10px 30px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.09);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.16), 0 8px 24px rgba(0,0,0,0.10);
  --shadow-glow: 0 0 0 1px var(--accent-border), 0 0 40px var(--accent-glow);

  /* --- Transitions --- */
  --t-fast:   120ms ease;
  --t-base:   200ms ease;
  --t-slow:   400ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}