/* Kangoo Design System — tokens 1.0.0 (2026-10-27)
   GERADO por gerar-tokens.mjs a partir de tokens.json. Nao edite a mao.

   Importar: <link rel="stylesheet" href=".../design-system/tokens.css">
             ou, no app (Vite): import '<caminho>/design-system/tokens.css';

   Modo escuro: segue o sistema (prefers-color-scheme) e pode ser forcado com
   <html data-theme="dark"> ou data-theme="light" — mesmo contrato das paginas
   web kangoo-* (vitrine, business, partners, blog, admin, investors). */

:root {
  color-scheme: light dark;

  /* Paleta base (valores fixos; prefira os tokens semanticos abaixo nas telas) */
  --k-orange-50: #FFF6EC;
  --k-orange-100: #FFE9CF;
  --k-orange-200: #FFD9B0;
  --k-orange-400: #FF9433;
  --k-orange-500: #FF7A00;
  --k-orange-600: #D45D00;
  --k-orange-700: #C24E00;
  --k-orange-900: #231208;
  --k-indigo-50: #EEF2FF;
  --k-indigo-100: #E0E7FF;
  --k-indigo-400: #818CF8;
  --k-indigo-500: #4F46E5;
  --k-indigo-700: #3730A3;
  --k-sky-400: #55CAFF;
  --k-sky-500: #1CB0F6;
  --k-sky-600: #1283BD;
  --k-sky-700: #1270A8;
  --k-neutral-0: #FFFFFF;
  --k-neutral-50: #F7F9FC;
  --k-neutral-100: #F1F5F9;
  --k-neutral-200: #E5E7EB;
  --k-neutral-300: #CBD5E1;
  --k-neutral-400: #9CA3AF;
  --k-neutral-500: #6B7280;
  --k-neutral-600: #4A5568;
  --k-neutral-700: #374151;
  --k-neutral-800: #1F2937;
  --k-neutral-900: #0B1220;
  --k-success-50: #D7FFB8;
  --k-success-200: #A5ED6E;
  --k-success-400: #73E61B;
  --k-success-500: #58CC02;
  --k-success-600: #46A302;
  --k-success-700: #3D7A00;
  --k-success-900: #1A3300;
  --k-error-50: #FFDFE0;
  --k-error-200: #FFB3B8;
  --k-error-500: #FF4B4B;
  --k-error-600: #DC2626;
  --k-error-700: #C4292F;
  --k-error-800: #B91C1C;
  --k-warning-50: #FFF3E0;
  --k-warning-500: #FF9600;
  --k-warning-700: #B45309;
  --k-gold-300: #FFC53D;
  --k-gold-400: #FFB703;
  --k-gold-600: #B7791F;
  --k-streak-on: #FF7A00;
  --k-streak-off: #C89A6B;
  --k-heart-on: #FF4B4B;
  --k-heart-off: #CBD5E1;
  --k-unit-1-bg: #58CC02;
  --k-unit-1-lip: #46A302;
  --k-unit-2-bg: #1CB0F6;
  --k-unit-2-lip: #1283BD;
  --k-unit-3-bg: #FF7A00;
  --k-unit-3-lip: #D45D00;
  --k-unit-4-bg: #A560F0;
  --k-unit-4-lip: #7C3FBF;
  --k-unit-5-bg: #00B4A0;
  --k-unit-5-lip: #00877A;
  --k-unit-6-bg: #FF4B6E;
  --k-unit-6-lip: #D42B4C;
  --k-unit-ink: #0B1220;
  --k-brand-extra-whatsapp: #25D366;

  /* Semanticos — tema claro (padrao) */
  --k-bg: #F7F9FC;
  --k-surface: #FFFFFF;
  --k-surface-2: #F1F5F9;
  --k-surface-warm: #FFF6EC;
  --k-border: #E5E7EB;
  --k-border-strong: #CBD5E1;
  --k-divider: rgba(15, 23, 42, 0.08);
  --k-text: #1F2937;
  --k-text-strong: #0B1220;
  --k-text-2: #6B7280;
  --k-text-muted: #9CA3AF;
  --k-text-inverse: #FFFFFF;
  --k-on-brand: #231208;
  --k-brand: #FF7A00;
  --k-brand-lip: #D45D00;
  --k-brand-text: #C24E00;
  --k-accent: #4F46E5;
  --k-accent-lip: #3730A3;
  --k-accent-tint: rgba(79, 70, 229, 0.10);
  --k-accent-tint-border: rgba(79, 70, 229, 0.45);
  --k-brand-tint: rgba(255, 122, 0, 0.12);
  --k-link: #4F46E5;
  --k-info-text: #1270A8;
  --k-success-text: #3D7A00;
  --k-success-bg: #D7FFB8;
  --k-success-border: #A5ED6E;
  --k-error-text: #C4292F;
  --k-error-bg: #FFDFE0;
  --k-error-border: #FFB3B8;
  --k-warning-text: #B45309;
  --k-warning-bg: #FFF3E0;
  --k-focus: #4F46E5;
  --k-overlay: rgba(11, 18, 32, 0.55);
  --k-hover: rgba(0, 0, 0, 0.06);
  --k-disabled-bg: rgba(0, 0, 0, 0.14);
  --k-disabled-lip: rgba(0, 0, 0, 0.10);
  --k-tooltip-bg: #1F2937;
  --k-track: #E5E7EB;

  /* Tipografia */
  --k-font-base: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --k-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --k-fw-regular: 400;
  --k-fw-medium: 500;
  --k-fw-semibold: 600;
  --k-fw-bold: 700;
  --k-fw-extrabold: 800;
  --k-fw-black: 900;
  --k-fs-2xs: 11.5px;
  --k-fs-xs: 12.5px;
  --k-fs-sm: 13.5px;
  --k-fs-base: 15px;
  --k-fs-md: 16.5px;
  --k-fs-lg: 17.5px;
  --k-fs-xl: 19.5px;
  --k-fs-2xl: 21.5px;
  --k-fs-3xl: 24px;
  --k-fs-4xl: 28px;
  --k-fs-5xl: 36px;
  --k-fs-6xl: 44px;
  --k-lh-tight: 1.15;
  --k-lh-snug: 1.25;
  --k-lh-normal: 1.35;
  --k-lh-relaxed: 1.45;
  --k-lh-loose: 1.6;
  --k-ls-tight: -0.02em;
  --k-ls-snug: -0.01em;
  --k-ls-normal: 0;
  --k-ls-label: 0.06em;
  --k-ls-caps: 0.12em;

  /* Espacamento (base 4 px; 0.5 vira 0_5) */
  --k-space-0: 0px;
  --k-space-1: 4px;
  --k-space-2: 8px;
  --k-space-3: 12px;
  --k-space-4: 16px;
  --k-space-5: 20px;
  --k-space-6: 24px;
  --k-space-8: 32px;
  --k-space-10: 40px;
  --k-space-12: 48px;
  --k-space-16: 64px;
  --k-space-24: 96px;
  --k-space-0_5: 2px;
  --k-space-1_5: 6px;
  --k-space-2_5: 10px;
  --k-space-3_5: 14px;

  /* Raios */
  --k-radius-xs: 6px;
  --k-radius-sm: 8px;
  --k-radius-md: 10px;
  --k-radius-lg: 12px;
  --k-radius-xl: 14px;
  --k-radius-2xl: 16px;
  --k-radius-3xl: 18px;
  --k-radius-4xl: 20px;
  --k-radius-pill: 999px;
  --k-radius-round: 50%;

  /* Sombras (lip-* recebem a cor depois: `var(--k-shadow-lip) var(--k-brand-lip)`) */
  --k-shadow-lip-sm: 0 3px 0;
  --k-shadow-lip: 0 4px 0;
  --k-shadow-lip-lg: 0 5px 0;
  --k-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -16px rgba(15, 23, 42, 0.35);
  --k-shadow-raised: 0 6px 18px rgba(0, 0, 0, 0.18);
  --k-shadow-pop: 0 8px 22px rgba(0, 0, 0, 0.22);
  --k-shadow-modal: 0 18px 50px rgba(0, 0, 0, 0.25);
  --k-shadow-glow-brand: 0 14px 28px -12px rgba(255, 122, 0, 0.75);
  --k-shadow-glow-accent: 0 8px 20px rgba(79, 70, 229, 0.28);

  /* Movimento */
  --k-dur-press: 80ms;
  --k-dur-fast: 120ms;
  --k-dur-base: 150ms;
  --k-dur-slide: 260ms;
  --k-dur-progress: 320ms;
  --k-dur-enter: 340ms;
  --k-dur-paint: 420ms;
  --k-dur-emphasis: 520ms;
  --k-dur-celebrate: 700ms;
  --k-dur-loop-float: 1600ms;
  --k-dur-loop-pulse: 1800ms;
  --k-dur-loop-ring: 2400ms;
  --k-dur-loop-breathe: 2600ms;
  --k-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --k-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --k-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --k-ease-progress: cubic-bezier(0.34, 1.2, 0.64, 1);
  --k-ease-shake: cubic-bezier(0.36, 0.07, 0.19, 0.97);

  /* Breakpoints (so referencia: var() nao funciona dentro de @media) */
  --k-bp-phone-sm: 360px;
  --k-bp-header-compact: 420px;
  --k-bp-content: 640px;
  --k-bp-desktop-quiz: 900px;
  --k-bp-desktop: 1000px;

  /* Layout */
  --k-layout-content-max: 640px;
  --k-layout-trail-desktop: 592px;
  --k-layout-side-column: 368px;
  --k-layout-side-menu: 256px;
  --k-layout-desktop-max: 1008px;
  --k-layout-admin-max: 1240px;
  --k-layout-site-max: 1080px;
  --k-layout-balloon: 300px;
  --k-layout-bottom-bar: 57px;
  --k-layout-gutter: 16px;

  /* Camadas (z-index) */
  --k-z-base: 0;
  --k-z-bottom-bar: 10;
  --k-z-lesson-footer: 12;
  --k-z-header: 20;
  --k-z-side-menu: 30;
  --k-z-tooltip: 80;
  --k-z-modal: 100;
  --k-z-toast: 120;

  /* Alvo de toque */
  --k-touch-min: 44px;
  --k-touch-comfortable: 48px;
  --k-touch-primary: 52px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-bg: #0F1420;
    --k-surface: #171E2E;
    --k-surface-2: #1D2740;
    --k-surface-warm: #2A2018;
    --k-border: #2A3450;
    --k-border-strong: #4F5B7D;
    --k-divider: rgba(255, 255, 255, 0.08);
    --k-text: #E5E9F2;
    --k-text-strong: #FFFFFF;
    --k-text-2: #AAB4C8;
    --k-text-muted: #8A93A6;
    --k-text-inverse: #0B1220;
    --k-on-brand: #231208;
    --k-brand: #FF7A00;
    --k-brand-lip: #D45D00;
    --k-brand-text: #FF9433;
    --k-accent: #818CF8;
    --k-accent-lip: #4F46E5;
    --k-accent-tint: rgba(129, 140, 248, 0.16);
    --k-accent-tint-border: rgba(129, 140, 248, 0.55);
    --k-brand-tint: rgba(255, 122, 0, 0.18);
    --k-link: #A5B4FC;
    --k-info-text: #55CAFF;
    --k-success-text: #73E61B;
    --k-success-bg: #1E3A0A;
    --k-success-border: #3D7A00;
    --k-error-text: #FF6B6B;
    --k-error-bg: #3A1518;
    --k-error-border: #8A2A30;
    --k-warning-text: #FFC53D;
    --k-warning-bg: #33240A;
    --k-focus: #A5B4FC;
    --k-overlay: rgba(0, 0, 0, 0.65);
    --k-hover: rgba(255, 255, 255, 0.07);
    --k-disabled-bg: rgba(255, 255, 255, 0.12);
    --k-disabled-lip: rgba(255, 255, 255, 0.06);
    --k-tooltip-bg: #E5E9F2;
    --k-track: #2A3450;
  }
}

:root[data-theme="dark"] {
  --k-bg: #0F1420;
  --k-surface: #171E2E;
  --k-surface-2: #1D2740;
  --k-surface-warm: #2A2018;
  --k-border: #2A3450;
  --k-border-strong: #4F5B7D;
  --k-divider: rgba(255, 255, 255, 0.08);
  --k-text: #E5E9F2;
  --k-text-strong: #FFFFFF;
  --k-text-2: #AAB4C8;
  --k-text-muted: #8A93A6;
  --k-text-inverse: #0B1220;
  --k-on-brand: #231208;
  --k-brand: #FF7A00;
  --k-brand-lip: #D45D00;
  --k-brand-text: #FF9433;
  --k-accent: #818CF8;
  --k-accent-lip: #4F46E5;
  --k-accent-tint: rgba(129, 140, 248, 0.16);
  --k-accent-tint-border: rgba(129, 140, 248, 0.55);
  --k-brand-tint: rgba(255, 122, 0, 0.18);
  --k-link: #A5B4FC;
  --k-info-text: #55CAFF;
  --k-success-text: #73E61B;
  --k-success-bg: #1E3A0A;
  --k-success-border: #3D7A00;
  --k-error-text: #FF6B6B;
  --k-error-bg: #3A1518;
  --k-error-border: #8A2A30;
  --k-warning-text: #FFC53D;
  --k-warning-bg: #33240A;
  --k-focus: #A5B4FC;
  --k-overlay: rgba(0, 0, 0, 0.65);
  --k-hover: rgba(255, 255, 255, 0.07);
  --k-disabled-bg: rgba(255, 255, 255, 0.12);
  --k-disabled-lip: rgba(255, 255, 255, 0.06);
  --k-tooltip-bg: #E5E9F2;
  --k-track: #2A3450;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }