/* Escala fechada do Live Copiloto. Todo valor de tipo, espaço, raio, sombra
   e cor da aplicação sai daqui; nenhum componente inventa número próprio. */

:root {
  color-scheme: light dark;

  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* tipo, razão 1,2, base 16 */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-display: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --text-hero: clamp(2.5rem, 1.2rem + 5.2vw, 5rem);

  /* espaço, grade de 4 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --container: 1120px;
  --container-app: 1280px;
  --measure: 65ch;

  --duration-fast: 150ms;
  --duration-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* rampa neutra tingida com a matiz da marca (195) */
  --n0: oklch(0.985 0.006 195);
  --n1: oklch(0.965 0.008 195);
  --n2: oklch(0.93 0.01 195);
  --n3: oklch(0.88 0.012 195);
  --n4: oklch(0.8 0.012 195);
  --n5: oklch(0.68 0.012 195);
  --n6: oklch(0.56 0.012 195);
  --n7: oklch(0.42 0.012 195);
  --n8: oklch(0.33 0.012 195);
  --n9: oklch(0.24 0.012 195);
  --n10: oklch(0.17 0.012 195);

  /* papéis, tema claro */
  --bg: var(--n0);
  --surface: oklch(0.995 0.003 195);
  --surface-2: var(--n1);
  --surface-3: var(--n2);
  --border: var(--n3);
  --border-strong: var(--n4);
  --text: var(--n9);
  --text-soft: var(--n7);
  --text-faint: var(--n6);

  --brand: oklch(0.46 0.1 195);
  --brand-hover: oklch(0.4 0.1 195);
  --brand-soft: oklch(0.95 0.03 195);
  --on-brand: #fff;

  /* Cores das plataformas, usadas na identificação das conexões. */
  --platform-youtube: #ff0033;
  --platform-twitch: #9146ff;
  --platform-instagram: #e4405f;
  --platform-facebook: #1877f2;
  --platform-kwai: #ff6b00;
  --platform-tiktok-cyan: #25f4ee;
  --platform-tiktok-pink: #fe2c55;

  /* ao vivo é verde; presente continua quente, em token próprio */
  --live: oklch(0.6 0.16 150);
  --live-text: oklch(0.45 0.12 150);
  --live-soft: oklch(0.95 0.04 150);

  --gift-text: oklch(0.45 0.18 25);
  --gift-soft: oklch(0.95 0.03 25);

  --ai: oklch(0.48 0.14 300);
  --ai-soft: oklch(0.95 0.03 300);

  --success: oklch(0.46 0.13 150);
  --success-soft: oklch(0.95 0.04 150);
  --warning: oklch(0.5 0.12 75);
  --warning-soft: oklch(0.96 0.05 85);
  --danger: oklch(0.5 0.19 25);
  --danger-soft: oklch(0.95 0.03 25);

  /* ação que invalida algo em uso (ex.: renovar o link do overlay); laranja para não ser lida como "excluir" nem como ação comum */
  --caution: oklch(0.74 0.16 55);
  --caution-hover: oklch(0.7 0.17 55);
  --on-caution: oklch(0.2 0.03 55);

  --focus-ring: oklch(0.6 0.15 195);

  /* fundo atrás de modal; escuro nos dois temas para separar a camada */
  --scrim: oklch(0.17 0.012 195 / 0.6);

  --shadow-1: 0 1px 2px oklch(0.2 0.02 195 / 0.08), 0 1px 1px oklch(0.2 0.02 195 / 0.04);
  --shadow-2: 0 12px 32px oklch(0.2 0.02 195 / 0.14), 0 2px 6px oklch(0.2 0.02 195 / 0.06);
}

:root[data-theme='dark'] {
  --bg: oklch(0.17 0.012 195);
  --surface: oklch(0.21 0.012 195);
  --surface-2: oklch(0.25 0.012 195);
  --surface-3: oklch(0.3 0.012 195);
  --border: oklch(0.32 0.012 195);
  --border-strong: oklch(0.42 0.012 195);
  --text: oklch(0.93 0.008 195);
  --text-soft: oklch(0.76 0.01 195);
  --text-faint: oklch(0.64 0.01 195);

  --brand: oklch(0.78 0.1 195);
  --brand-hover: oklch(0.85 0.09 195);
  --brand-soft: oklch(0.3 0.05 195);
  --on-brand: oklch(0.17 0.012 195);

  --live: oklch(0.7 0.17 150);
  --live-text: oklch(0.82 0.12 150);
  --live-soft: oklch(0.3 0.06 150);

  --gift-text: oklch(0.82 0.12 25);
  --gift-soft: oklch(0.3 0.07 25);

  --ai: oklch(0.8 0.1 300);
  --ai-soft: oklch(0.3 0.06 300);

  --success: oklch(0.78 0.12 150);
  --success-soft: oklch(0.28 0.05 150);
  --warning: oklch(0.84 0.12 85);
  --warning-soft: oklch(0.3 0.06 85);
  --danger: oklch(0.78 0.14 25);
  --danger-soft: oklch(0.3 0.07 25);

  --caution: oklch(0.78 0.15 55);
  --caution-hover: oklch(0.84 0.14 55);
  --on-caution: oklch(0.2 0.03 55);

  --focus-ring: oklch(0.8 0.12 195);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-2: 0 12px 32px oklch(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: oklch(0.17 0.012 195);
    --surface: oklch(0.21 0.012 195);
    --surface-2: oklch(0.25 0.012 195);
    --surface-3: oklch(0.3 0.012 195);
    --border: oklch(0.32 0.012 195);
    --border-strong: oklch(0.42 0.012 195);
    --text: oklch(0.93 0.008 195);
    --text-soft: oklch(0.76 0.01 195);
    --text-faint: oklch(0.64 0.01 195);

    --brand: oklch(0.78 0.1 195);
    --brand-hover: oklch(0.85 0.09 195);
    --brand-soft: oklch(0.3 0.05 195);
    --on-brand: oklch(0.17 0.012 195);

    --live: oklch(0.7 0.17 150);
    --live-text: oklch(0.82 0.12 150);
    --live-soft: oklch(0.3 0.06 150);

    --gift-text: oklch(0.82 0.12 25);
    --gift-soft: oklch(0.3 0.07 25);

    --ai: oklch(0.8 0.1 300);
    --ai-soft: oklch(0.3 0.06 300);

    --success: oklch(0.78 0.12 150);
    --success-soft: oklch(0.28 0.05 150);
    --warning: oklch(0.84 0.12 85);
    --warning-soft: oklch(0.3 0.06 85);
    --danger: oklch(0.78 0.14 25);
    --danger-soft: oklch(0.3 0.07 25);

    --caution: oklch(0.78 0.15 55);
    --caution-hover: oklch(0.84 0.14 55);
    --on-caution: oklch(0.2 0.03 55);

    --focus-ring: oklch(0.8 0.12 195);

    --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
    --shadow-2: 0 12px 32px oklch(0 0 0 / 0.5);
  }
}