/* ============================================================
   ICAP Design System — Tokens CSS
   Gerado em: 2026-06-04
   Prefixo: --icap-
   ============================================================ */

/* ── TEMA CLARO (padrão) ────────────────────────────────── */
:root {

  /* Paleta primária */
  --icap-primary: #1A73E8;
  --icap-primary-hover: #1557B0;
  --icap-primary-active: #0D47A1;
  --icap-primary-subtle: #E8F0FE;
  --icap-primary-border: #93B8F5;
  --icap-primary-text: #1557B0;

  /* Sucesso */
  --icap-success: #34A853;
  --icap-success-hover: #2D8F47;
  --icap-success-subtle: #E6F4EA;
  --icap-success-border: #A8D5B5;
  --icap-success-text: #137333;

  /* Alerta */
  --icap-warning: #FBBC04;
  --icap-warning-hover: #E0A800;
  --icap-warning-subtle: #FEF3C7;
  --icap-warning-border: #F6D56B;
  --icap-warning-text: #92400E;

  /* Perigo */
  --icap-danger: #EA4335;
  --icap-danger-hover: #C5221F;
  --icap-danger-subtle: #FCE8E6;
  --icap-danger-border: #F5C6C3;
  --icap-danger-text: #C5221F;

  /* Texto */
  --icap-text-primary: #202124;
  --icap-text-secondary: #5F6368;
  --icap-text-tertiary: #9AA0A6;
  --icap-text-inverse: #FFFFFF;

  /* Superfícies */
  --icap-bg-page: #F8F9FA;
  --icap-bg-surface: #FFFFFF;
  --icap-bg-elevated: #FFFFFF;
  --icap-bg-overlay: rgba(32, 33, 36, 0.48);
  --icap-bg-disabled: #F1F3F4;

  /* Bordas */
  --icap-border-default: #DADCE0;
  --icap-border-strong: #BDC1C6;
  --icap-border-focus: #1A73E8;
  --icap-border-disabled: #E8EAED;

  /* Topbar */
  --icap-topbar-bg: #1A73E8;
  --icap-topbar-text: #FFFFFF;
  --icap-topbar-sub: rgba(255, 255, 255, 0.75);
  --icap-topbar-pill: rgba(255, 255, 255, 0.18);

  /* Sombras */
  --icap-shadow-sm: 0 1px 2px rgba(60, 64, 67, .08), 0 1px 3px 1px rgba(60, 64, 67, .06);
  --icap-shadow-md: 0 1px 2px rgba(60, 64, 67, .10), 0 2px 6px 2px rgba(60, 64, 67, .08);
  --icap-shadow-lg: 0 4px 8px 3px rgba(60, 64, 67, .10), 0 1px 3px rgba(60, 64, 67, .12);
  --icap-shadow-focus: 0 0 0 3px rgba(26, 115, 232, 0.22);

  /* Tipografia — família */
  --icap-font-sans: 'Google Sans', 'Roboto', system-ui, -apple-system, sans-serif;
  --icap-font-mono: 'Roboto Mono', 'Courier New', monospace;

  /* Tipografia — tamanhos */
  --icap-text-xs: 11px;
  --icap-text-sm: 12px;
  --icap-text-base: 13px;
  --icap-text-md: 14px;
  --icap-text-lg: 16px;
  --icap-text-xl: 20px;
  --icap-text-2xl: 24px;

  /* Tipografia — pesos */
  --icap-weight-regular: 400;
  --icap-weight-medium: 500;

  /* Espaçamento */
  --icap-space-1: 4px;
  --icap-space-2: 8px;
  --icap-space-3: 12px;
  --icap-space-4: 16px;
  --icap-space-5: 20px;
  --icap-space-6: 24px;
  --icap-space-8: 32px;

  /* Raios de borda */
  --icap-radius-sm: 4px;
  --icap-radius-md: 8px;
  --icap-radius-lg: 12px;
  --icap-radius-xl: 16px;
  --icap-radius-pill: 9999px;

  /* Transições */
  --icap-transition-fast: 0.12s ease;
  --icap-transition-base: 0.2s ease;
  --icap-transition-slow: 0.35s ease;

  /* Cores Google 4 */
  --icap-google-blue: #1A73E8;
  --icap-google-red: #EA4335;
  --icap-google-yellow: #FBBC04;
  --icap-google-green: #34A853;

  /* Chips */
  --icap-chip-default-bg: #F1F3F4;
  --icap-chip-default-text: #5F6368;
  --icap-chip-default-border: #DADCE0;
  --icap-chip-selected-bg: #E8F0FE;
  --icap-chip-selected-text: #1557B0;
  --icap-chip-selected-border: #93B8F5;

  /* Stepper */
  --icap-step-done-bg: #34A853;
  --icap-step-done-text: #FFFFFF;
  --icap-step-active-bg: #1A73E8;
  --icap-step-active-text: #FFFFFF;
  --icap-step-idle-bg: #F1F3F4;
  --icap-step-idle-text: #9AA0A6;

  /* WhatsApp */
  --icap-whatsapp-bg: #E6F4EA;
  --icap-whatsapp-border: #A8D5B5;
  --icap-whatsapp-text: #1A5632;
  --icap-whatsapp-icon: #34A853;
}

/* ── TEMA ESCURO — atributo explícito ───────────────────── */
[data-theme="dark"] {

  /* Paleta primária */
  --icap-primary: #8AB4F8;
  --icap-primary-hover: #ADC8FF;
  --icap-primary-active: #C6DAFC;
  --icap-primary-subtle: #1C2B4A;
  --icap-primary-border: #4A7EC7;
  --icap-primary-text: #8AB4F8;

  /* Sucesso */
  --icap-success: #81C995;
  --icap-success-hover: #A8D5B5;
  --icap-success-subtle: #1A3A24;
  --icap-success-border: #3D7A50;
  --icap-success-text: #81C995;

  /* Alerta */
  --icap-warning: #FDD663;
  --icap-warning-hover: #FEE28A;
  --icap-warning-subtle: #3A2E00;
  --icap-warning-border: #8A6D00;
  --icap-warning-text: #FDD663;

  /* Perigo */
  --icap-danger: #F28B82;
  --icap-danger-hover: #F6AEA9;
  --icap-danger-subtle: #3C1A19;
  --icap-danger-border: #8C3C38;
  --icap-danger-text: #F28B82;

  /* Texto */
  --icap-text-primary: #E8EAED;
  --icap-text-secondary: #9AA0A6;
  --icap-text-tertiary: #5F6368;
  --icap-text-inverse: #202124;

  /* Superfícies */
  --icap-bg-page: #202124;
  --icap-bg-surface: #2D2E30;
  --icap-bg-elevated: #3C3F41;
  --icap-bg-overlay: rgba(0, 0, 0, 0.64);
  --icap-bg-disabled: #3C3F41;

  /* Bordas */
  --icap-border-default: #3C3F41;
  --icap-border-strong: #5F6368;
  --icap-border-focus: #8AB4F8;
  --icap-border-disabled: #2D2E30;

  /* Topbar */
  --icap-topbar-bg: #1C2B4A;
  --icap-topbar-text: #E8EAED;
  --icap-topbar-sub: rgba(232, 234, 237, 0.65);
  --icap-topbar-pill: rgba(255, 255, 255, 0.10);

  /* Sombras */
  --icap-shadow-sm: 0 1px 2px rgba(0, 0, 0, .20), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --icap-shadow-md: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 6px 2px rgba(0, 0, 0, .20);
  --icap-shadow-lg: 0 4px 8px 3px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .30);
  --icap-shadow-focus: 0 0 0 3px rgba(138, 180, 248, 0.30);

  /* Chips */
  --icap-chip-default-bg: #3C3F41;
  --icap-chip-default-text: #9AA0A6;
  --icap-chip-default-border: #3C3F41;
  --icap-chip-selected-bg: #1C2B4A;
  --icap-chip-selected-text: #8AB4F8;
  --icap-chip-selected-border: #4A7EC7;

  /* Stepper */
  --icap-step-done-bg: #81C995;
  --icap-step-done-text: #202124;
  --icap-step-active-bg: #8AB4F8;
  --icap-step-active-text: #202124;
  --icap-step-idle-bg: #3C3F41;
  --icap-step-idle-text: #5F6368;

  /* WhatsApp */
  --icap-whatsapp-bg: #1A3A24;
  --icap-whatsapp-border: #3D7A50;
  --icap-whatsapp-text: #81C995;
  --icap-whatsapp-icon: #81C995;
}

/* ── TEMA ESCURO — preferência do sistema ───────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

    /* Paleta primária */
    --icap-primary: #8AB4F8;
    --icap-primary-hover: #ADC8FF;
    --icap-primary-active: #C6DAFC;
    --icap-primary-subtle: #1C2B4A;
    --icap-primary-border: #4A7EC7;
    --icap-primary-text: #8AB4F8;

    /* Sucesso */
    --icap-success: #81C995;
    --icap-success-hover: #A8D5B5;
    --icap-success-subtle: #1A3A24;
    --icap-success-border: #3D7A50;
    --icap-success-text: #81C995;

    /* Alerta */
    --icap-warning: #FDD663;
    --icap-warning-hover: #FEE28A;
    --icap-warning-subtle: #3A2E00;
    --icap-warning-border: #8A6D00;
    --icap-warning-text: #FDD663;

    /* Perigo */
    --icap-danger: #F28B82;
    --icap-danger-hover: #F6AEA9;
    --icap-danger-subtle: #3C1A19;
    --icap-danger-border: #8C3C38;
    --icap-danger-text: #F28B82;

    /* Texto */
    --icap-text-primary: #E8EAED;
    --icap-text-secondary: #9AA0A6;
    --icap-text-tertiary: #5F6368;
    --icap-text-inverse: #202124;

    /* Superfícies */
    --icap-bg-page: #202124;
    --icap-bg-surface: #2D2E30;
    --icap-bg-elevated: #3C3F41;
    --icap-bg-overlay: rgba(0, 0, 0, 0.64);
    --icap-bg-disabled: #3C3F41;

    /* Bordas */
    --icap-border-default: #3C3F41;
    --icap-border-strong: #5F6368;
    --icap-border-focus: #8AB4F8;
    --icap-border-disabled: #2D2E30;

    /* Topbar */
    --icap-topbar-bg: #1C2B4A;
    --icap-topbar-text: #E8EAED;
    --icap-topbar-sub: rgba(232, 234, 237, 0.65);
    --icap-topbar-pill: rgba(255, 255, 255, 0.10);

    /* Sombras */
    --icap-shadow-sm: 0 1px 2px rgba(0, 0, 0, .20), 0 1px 3px 1px rgba(0, 0, 0, .15);
    --icap-shadow-md: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 6px 2px rgba(0, 0, 0, .20);
    --icap-shadow-lg: 0 4px 8px 3px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .30);
    --icap-shadow-focus: 0 0 0 3px rgba(138, 180, 248, 0.30);

    /* Chips */
    --icap-chip-default-bg: #3C3F41;
    --icap-chip-default-text: #9AA0A6;
    --icap-chip-default-border: #3C3F41;
    --icap-chip-selected-bg: #1C2B4A;
    --icap-chip-selected-text: #8AB4F8;
    --icap-chip-selected-border: #4A7EC7;

    /* Stepper */
    --icap-step-done-bg: #81C995;
    --icap-step-done-text: #202124;
    --icap-step-active-bg: #8AB4F8;
    --icap-step-active-text: #202124;
    --icap-step-idle-bg: #3C3F41;
    --icap-step-idle-text: #5F6368;

    /* WhatsApp */
    --icap-whatsapp-bg: #1A3A24;
    --icap-whatsapp-border: #3D7A50;
    --icap-whatsapp-text: #81C995;
    --icap-whatsapp-icon: #81C995;
  }
}