@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Lets.events Design System v2.0
   GERADO a partir de src/design-system.css — não edite à mão.
   Rode `pnpm run build:tokens` após alterar a fonte. */

/* ============================================================
   LETS.EVENTS — Design System v2.0
   ============================================================
   FONTE ÚNICA DA VERDADE dos design tokens da Lets.events.

   Este arquivo é a origem de tudo:
     - public/design-system.css  (cópia pública, para projetos sem Tailwind)
     - public/tokens.json        (tokens em JSON, para ferramentas e agentes)
   Ambos são GERADOS por `pnpm run build:tokens`. Nunca edite os arquivos
   em public/ na mão — edite AQUI e rode o script.

   Camadas:
     1. Tokens primitivos (a paleta bruta — 11 famílias × 11 tons)
     2. Tokens semânticos (o significado: brand, danger, success, warning)
     3. Tipografia · 4. Espaçamento, raio, sombra
     5+. Classes de componente, todas prefixadas com `ds-`
   ============================================================ */

/* A fonte Inter NÃO é carregada por @import aqui.
   Quando este arquivo é empacotado junto com o Tailwind, um @import cai depois
   das regras dele e o navegador descarta a linha — a fonte sumia sem avisar.

   Como carregar a Inter, dependendo do caminho:
     • Com Tailwind: coloque o <link> do Google Fonts no seu index.html
       (veja o index.html deste projeto — já vem pronto para copiar).
     • Sem Tailwind: use public/design-system.css, que é gerado JÁ COM o
       @import da fonte no topo. Um <link> e funciona. */

:root {
  /* ─────────────────────────────────────────────
     1. TOKENS PRIMITIVOS
     Nunca use um hex direto no código. Use estes tokens.
     ───────────────────────────────────────────── */

  /* ── Brand (azul primário Lets) ── */
  --brand-50:  #DBE8FF;
  --brand-100: #BDD5FF;
  --brand-200: #7AABFF;
  --brand-300: #3881FF;
  --brand-400: #005AF5;
  --brand-500: #004ED2;
  --brand-600: #0042B2;
  --brand-700: #00348F;
  --brand-800: #00276B;
  --brand-900: #001A47;
  --brand-950: #000D24;

  /* ── Red (erro, destrutivo) ── */
  --red-50:  #FEF0F0;
  --red-100: #FDD8D8;
  --red-200: #FBB0B0;
  --red-300: #F88888;
  --red-400: #F56060;
  --red-500: #F03838;
  --red-600: #D42020;
  --red-700: #A01818;
  --red-800: #6C1010;
  --red-900: #380808;
  --red-950: #1C0404;

  /* ── Orange ── */
  --orange-50:  #FEEFEB;
  --orange-100: #FEE0D8;
  --orange-200: #FCC1B0;
  --orange-300: #FBA189;
  --orange-400: #F98261;
  --orange-500: #F86339;
  --orange-600: #EC3A08;
  --orange-700: #B12B06;
  --orange-800: #761D04;
  --orange-900: #3B0E02;
  --orange-950: #1E0701;

  /* ── Yellow (aviso) ── */
  --yellow-50:  #FFF9E6;
  --yellow-100: #FFF3CD;
  --yellow-200: #FFE69C;
  --yellow-300: #FFDA6A;
  --yellow-400: #FFCD39;
  --yellow-500: #FFC107;
  --yellow-600: #CC9A06;
  --yellow-700: #997305;
  --yellow-800: #664D03;
  --yellow-900: #332602;
  --yellow-950: #1A1301;

  /* ── Green (sucesso) ── */
  --green-50:  #E8F5E9;
  --green-100: #C8E6C9;
  --green-200: #81C784;
  --green-300: #4CAF50;
  --green-400: #33A044;
  --green-500: #26A743;
  --green-600: #1E8535;
  --green-700: #176427;
  --green-800: #0F421A;
  --green-900: #08210D;
  --green-950: #041107;

  /* ── Blue (informativo — NÃO é a cor da marca, use --brand-*) ── */
  --blue-50:  #E5F1FF;
  --blue-100: #CCE4FF;
  --blue-200: #9AC9FF;
  --blue-300: #66ADFF;
  --blue-400: #3392FF;
  --blue-500: #0278FE;
  --blue-600: #0260CB;
  --blue-700: #014898;
  --blue-800: #013066;
  --blue-900: #001833;
  --blue-950: #000C1A;

  /* ── Purple ── */
  --purple-50:  #F3EEFB;
  --purple-100: #E0D3F5;
  --purple-200: #C5AAED;
  --purple-300: #A982E4;
  --purple-400: #9A6DDE;
  --purple-500: #8961D8;
  --purple-600: #6431C8;
  --purple-700: #4B2597;
  --purple-800: #331966;
  --purple-900: #180C31;
  --purple-950: #0C0619;

  /* ── Pink ── */
  --pink-50:  #FCEEF9;
  --pink-100: #F9DCF3;
  --pink-200: #F2B5E5;
  --pink-300: #ED92D9;
  --pink-400: #E66BCB;
  --pink-500: #E048BF;
  --pink-600: #B83A9B;
  --pink-700: #8E2D78;
  --pink-800: #642055;
  --pink-900: #3A1332;
  --pink-950: #1D0A19;

  /* ── Dark (texto e superfícies escuras) ── */
  --dark-50:  #F0F0F2;
  --dark-100: #DDDDE1;
  --dark-200: #C1C2C8;
  --dark-300: #B0B1B8;
  --dark-400: #A9ABB1;
  --dark-500: #808289;
  --dark-600: #4C4F54;
  --dark-700: #34363B;
  --dark-800: #1E2023;
  --dark-900: #040507;
  --dark-950: #030303;

  /* ── Greyscale (bordas, texto secundário) ── */
  --grey-50:  #F4F8FB;
  --grey-100: #E6EEF4;
  --grey-200: #DBE7F0;
  --grey-300: #BCCEDD;
  --grey-400: #9FB6C7;
  --grey-500: #849DAE;
  --grey-600: #698496;
  --grey-700: #516A7A;
  --grey-800: #394F61;
  --grey-900: #28343D;
  --grey-950: #101B23;

  /* ─────────────────────────────────────────────
     2. TOKENS SEMÂNTICOS
     Prefira estes aos primitivos: dizem a INTENÇÃO, não a cor.
     ───────────────────────────────────────────── */

  --surface-card-brand:   var(--brand-50);
  --surface-card-danger:  var(--red-50);
  --surface-card-success: var(--green-50);
  --surface-card-warning: var(--yellow-50);

  --surface-container-default-brand:   var(--brand-500);
  --surface-container-default-danger:  var(--red-500);
  --surface-container-default-success: var(--green-500);
  --surface-container-default-warning: var(--yellow-500);

  --surface-container-hover-brand:     var(--brand-600);
  --surface-container-hover-danger:    var(--red-600);
  --surface-container-hover-success:   var(--green-600);
  --surface-container-hover-warning:   var(--yellow-600);

  --surface-container-active-brand:    var(--brand-400);
  --surface-container-active-danger:   var(--red-400);
  --surface-container-active-success:  var(--green-400);
  --surface-container-active-warning:  var(--yellow-400);

  --surface-container-subtle-brand:    var(--brand-100);
  --surface-container-subtle-danger:   var(--red-100);
  --surface-container-subtle-success:  var(--green-100);
  --surface-container-subtle-warning:  var(--yellow-100);

  --border-default-brand:   var(--brand-500);
  --border-default-danger:  var(--red-500);
  --border-default-success: var(--green-500);
  --border-default-warning: var(--yellow-500);

  --text-brand:   var(--brand-500);
  --text-danger:  var(--red-500);
  --text-success: var(--green-500);
  --text-warning: var(--yellow-600);

  --color-white:      #FFFFFF;
  --color-black:      #000000;
  --color-background: #F5F5F7;
  --color-surface:    #FFFFFF;
  --color-text:       var(--dark-900);
  --color-text-muted: var(--grey-600);
  --color-border:     var(--grey-300);

  /* ─────────────────────────────────────────────
     3. TIPOGRAFIA
     ───────────────────────────────────────────── */

  --font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-display-xl: 700 56px/1.1 var(--font-family);
  --font-display-lg: 700 48px/1.1 var(--font-family);
  --font-display-md: 700 40px/1.15 var(--font-family);
  --font-display-sm: 700 32px/1.2 var(--font-family);

  --font-headline-lg: 600 28px/1.25 var(--font-family);
  --font-headline-md: 600 24px/1.3 var(--font-family);
  --font-headline-sm: 600 20px/1.35 var(--font-family);

  --font-body-lg: 400 18px/1.6 var(--font-family);
  --font-body-md: 400 16px/1.5 var(--font-family);
  --font-body-sm: 400 14px/1.5 var(--font-family);

  --font-button-lg: 600 16px/1 var(--font-family);
  --font-button-md: 600 14px/1 var(--font-family);
  --font-button-sm: 600 12px/1 var(--font-family);

  --font-label-lg: 500 14px/1.4 var(--font-family);
  --font-label-md: 500 12px/1.4 var(--font-family);
  --font-label-sm: 500 11px/1.4 var(--font-family);

  --font-badge:   600 11px/1 var(--font-family);
  --font-caption: 400 12px/1.4 var(--font-family);
  --font-tooltip: 500 12px/1.4 var(--font-family);

  /* ─────────────────────────────────────────────
     4. ESPAÇAMENTO · RAIO · SOMBRA · TRANSIÇÃO
     ───────────────────────────────────────────── */

  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* ─────────────────────────────────────────────
   5. CLASSES DE TIPOGRAFIA
   ───────────────────────────────────────────── */
.ds-display-xl  { font: var(--font-display-xl); }
.ds-display-lg  { font: var(--font-display-lg); }
.ds-display-md  { font: var(--font-display-md); }
.ds-display-sm  { font: var(--font-display-sm); }
.ds-headline-lg { font: var(--font-headline-lg); }
.ds-headline-md { font: var(--font-headline-md); }
.ds-headline-sm { font: var(--font-headline-sm); }
.ds-body-lg     { font: var(--font-body-lg); }
.ds-body-md     { font: var(--font-body-md); }
.ds-body-sm     { font: var(--font-body-sm); }
.ds-label-lg    { font: var(--font-label-lg); }
.ds-label-md    { font: var(--font-label-md); }
.ds-label-sm    { font: var(--font-label-sm); }
.ds-caption     { font: var(--font-caption); color: var(--color-text-muted); }

/* ─────────────────────────────────────────────
   6. BOTÃO
   Uso: <button class="ds-btn ds-btn-primary ds-btn-md">Texto</button>
   ───────────────────────────────────────────── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font: var(--font-button-md);
  padding: var(--space-10) var(--space-20);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.ds-btn:active   { transform: scale(0.97); }
.ds-btn:disabled { opacity: 0.4; pointer-events: none; }

.ds-btn-sm { padding: var(--space-6) var(--space-12);  font: var(--font-button-sm); border-radius: var(--radius-sm); }
.ds-btn-md { padding: var(--space-10) var(--space-20); font: var(--font-button-md); }
.ds-btn-lg { padding: var(--space-12) var(--space-24); font: var(--font-button-lg); border-radius: var(--radius-lg); }

.ds-btn-primary        { background: var(--surface-container-default-brand); color: var(--color-white); }
.ds-btn-primary:hover  { background: var(--surface-container-hover-brand); }
.ds-btn-primary:active { background: var(--surface-container-active-brand); }

.ds-btn-secondary       { background: transparent; color: var(--brand-500); border: 1.5px solid var(--brand-500); }
.ds-btn-secondary:hover { background: var(--brand-50); border-color: var(--brand-600); }

.ds-btn-ghost       { background: transparent; color: var(--brand-500); }
.ds-btn-ghost:hover { background: var(--brand-50); }

.ds-btn-danger       { background: var(--surface-container-default-danger); color: var(--color-white); }
.ds-btn-danger:hover { background: var(--surface-container-hover-danger); }

.ds-btn-success       { background: var(--surface-container-default-success); color: var(--color-white); }
.ds-btn-success:hover { background: var(--surface-container-hover-success); }

.ds-btn-warning       { background: var(--surface-container-default-warning); color: var(--dark-900); }
.ds-btn-warning:hover { background: var(--surface-container-hover-warning); }

/* ─────────────────────────────────────────────
   7. INPUT
   Uso: <div class="ds-input-group">
          <label class="ds-input-label">Email</label>
          <input class="ds-input" type="email" />
        </div>
   ───────────────────────────────────────────── */
.ds-input-group { display: flex; flex-direction: column; gap: var(--space-6); }
.ds-input-label { font: var(--font-label-md); color: var(--dark-700); }

.ds-input {
  font: var(--font-body-md);
  padding: var(--space-10) var(--space-16);
  border: 1.5px solid var(--grey-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  width: 100%;
}
.ds-input::placeholder { color: var(--grey-400); }
.ds-input:hover        { border-color: var(--grey-500); }
.ds-input:focus        { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0, 78, 210, 0.15); }
.ds-input:disabled     { background: var(--grey-50); color: var(--grey-400); cursor: not-allowed; }

.ds-textarea {
  font: var(--font-body-md);
  padding: var(--space-12) var(--space-16);
  border: 1.5px solid var(--grey-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  width: 100%;
}
.ds-textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0, 78, 210, 0.15); }

/* ─────────────────────────────────────────────
   8. CARD
   ───────────────────────────────────────────── */
.ds-card {
  background: var(--color-surface);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}
.ds-card:hover     { box-shadow: var(--shadow-md); }
.ds-card-title     { font: var(--font-headline-sm); }
.ds-card-subtitle  { font: var(--font-body-sm); color: var(--color-text-muted); margin-top: var(--space-4); }
.ds-card-body      { font: var(--font-body-md); }

.ds-card-brand   { background: var(--surface-card-brand);   border-color: var(--brand-200); }
.ds-card-success { background: var(--surface-card-success); border-color: var(--green-200); }
.ds-card-warning { background: var(--surface-card-warning); border-color: var(--yellow-200); }
.ds-card-danger  { background: var(--surface-card-danger);  border-color: var(--red-200); }

/* ─────────────────────────────────────────────
   9. BADGE
   ───────────────────────────────────────────── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font: var(--font-badge);
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ds-badge-brand   { background: var(--brand-50);  color: var(--brand-700); }
.ds-badge-danger  { background: var(--red-50);    color: var(--red-700); }
.ds-badge-success { background: var(--green-50);  color: var(--green-700); }
.ds-badge-warning { background: var(--yellow-50); color: var(--yellow-700); }
.ds-badge-neutral { background: var(--grey-100);  color: var(--grey-700); }

/* ─────────────────────────────────────────────
   10. TOGGLE SWITCH
   Uso: <label class="ds-toggle">
          <input type="checkbox" />
          <span class="ds-toggle-track"></span>
        </label>
   ───────────────────────────────────────────── */
.ds-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.ds-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ds-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--grey-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.ds-toggle-track::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}
.ds-toggle input:checked + .ds-toggle-track          { background: var(--brand-500); }
.ds-toggle input:checked + .ds-toggle-track::before  { transform: translateX(20px); }
.ds-toggle input:disabled + .ds-toggle-track         { opacity: 0.4; cursor: not-allowed; }

/* ─────────────────────────────────────────────
   11. AVATAR
   ───────────────────────────────────────────── */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.ds-avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.ds-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.ds-avatar-md { width: 40px; height: 40px; font-size: 14px; }
.ds-avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.ds-avatar-xl { width: 80px; height: 80px; font-size: 24px; }

/* ─────────────────────────────────────────────
   12. ALERT
   ───────────────────────────────────────────── */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  border-radius: var(--radius-md);
  font: var(--font-body-sm);
}
.ds-alert-title   { font: var(--font-label-lg); margin-bottom: var(--space-4); }
.ds-alert-brand   { background: var(--brand-50);  color: var(--brand-800);  border-left: 3px solid var(--brand-500); }
.ds-alert-danger  { background: var(--red-50);    color: var(--red-800);    border-left: 3px solid var(--red-500); }
.ds-alert-success { background: var(--green-50);  color: var(--green-800);  border-left: 3px solid var(--green-500); }
.ds-alert-warning { background: var(--yellow-50); color: var(--yellow-800); border-left: 3px solid var(--yellow-500); }