/* ============================================================
   variables.css — Rescisão Fácil
   Tokens de design. Toda cor, espaçamento e sombra vem daqui.
   ============================================================ */

:root {
  /* ── Cores Primárias ── */
  --color-bg:           #0D0F14;
  --color-surface:      #1A1D24;
  --color-surface-2:    #22262F;
  --color-border:       #2A2E38;

  /* ── Marca ── */
  --color-primary:      #FF6B35;
  --color-primary-dim:  rgba(255, 107, 53, 0.12);
  --color-primary-glow: rgba(255, 107, 53, 0.25);

  /* ── Semânticas ── */
  --color-success:      #22C55E;
  --color-success-dim:  rgba(34, 197, 94, 0.12);
  --color-warning:      #F59E0B;
  --color-danger:       #EF4444;

  /* ── Texto ── */
  --color-text:         #E8EAF0;
  --color-text-muted:   #9CA3AF;
  --color-text-subtle:  #6B7280;

  /* ── Tipografia ── */
  --font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs:  0.75rem;   /* 12px */
  --font-size-sm:  0.875rem;  /* 14px */
  --font-size-md:  1rem;      /* 16px */
  --font-size-lg:  1.125rem;  /* 18px */
  --font-size-xl:  1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.7;

  /* ── Espaçamento ── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ── Bordas ── */
  --radius-sm:   0.5rem;   /*  8px */
  --radius-md:   0.75rem;  /* 12px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.25rem;  /* 20px */
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-primary: 0 4px 20px rgba(255, 107, 53, 0.2);

  /* ── Transições ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ── */
  --max-width-app: 480px;
  --header-height: 64px;
}