/* Takeat Design System (Dashboard v1.0.1) -> Mautic 7.1.3
   Gerado a partir de https://raw.githubusercontent.com/takeat-design/UIKIT/main/design-system.json
   Poppins auto-hospedado (latin + latin-ext), sem chamadas externas. */

/* latin-ext 400 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 400 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext 500 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 500 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext 600 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 600 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext 700 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 700 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext 800 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/poppins-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 800 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/poppins-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TAKEAT DESIGN SYSTEM -> MAUTIC 7.1.3
   Fonte unica: https://raw.githubusercontent.com/takeat-design/UIKIT/main/design-system.json
   Design System "Dashboard" v1.0.1 + tokens de colors/typography/spacing/radius/shadows.

   Estrategia: o Mautic 7 usa tokens no padrao IBM Carbon (--primary-*, --layer-*,
   --body-01-*, ...). Em vez de sobrescrever componentes, este arquivo redefine os
   TOKENS. Assim todo componente que os consome passa a falar Takeat automaticamente.

   Este arquivo carrega DEPOIS de libraries.css e app.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETA TAKEAT (referencia literal do design system)
   -------------------------------------------------------------------------- */
:root {
  /* Vermelho Takeat (Principal) */
  --tkt-red-100: #FAE8E9;
  --tkt-red-200: #E5A1A4;
  --tkt-red-300: #DB6E72;
  --tkt-red-400: #D13F45;
  --tkt-red-500: #C8131B; /* default */
  --tkt-red-600: #94090F;
  --tkt-red-700: #610206;

  /* Verde */
  --tkt-green-100: #EBFAF8;
  --tkt-green-200: #BCE3DE;
  --tkt-green-300: #89D9CF;
  --tkt-green-400: #59CFC1;
  --tkt-green-500: #2EC9B7; /* default */
  --tkt-green-600: #1D9688;
  --tkt-green-700: #0F635A;

  /* Azul */
  --tkt-blue-100: #E6F7FF;
  --tkt-blue-200: #99DFFF;
  --tkt-blue-300: #66CFFF;
  --tkt-blue-400: #33BFFF;
  --tkt-blue-500: #01AFFF; /* default */
  --tkt-blue-600: #018CCC;
  --tkt-blue-700: #016999;

  /* Amarelo */
  --tkt-yellow-100: #FFF8EB;
  --tkt-yellow-200: #FFEBC8;
  --tkt-yellow-300: #FFD894;
  --tkt-yellow-400: #FFC561;
  --tkt-yellow-500: #FFB32F; /* default */
  --tkt-yellow-600: #CC8C1D;
  --tkt-yellow-700: #99670F;

  /* Terciarias — apenas detalhes */
  --tkt-orange-100: #FFF2EA;
  --tkt-orange-500: #FF7D24; /* default */
  --tkt-orange-600: #CC5F14;
  --tkt-orange-700: #994409;
  --tkt-green2-100: #EAF7EE;
  --tkt-green2-300: #77BD8B;
  --tkt-green2-500: #27A84C; /* default */
  --tkt-green2-600: #167532;
  --tkt-green2-700: #0A421A;

  /* Neutras — base de qualquer tela. Preto puro so em detalhes. */
  --tkt-white: #FFFFFF;
  --tkt-neutral-50:  #F6F6F6;
  --tkt-neutral-100: #EDEDED;
  --tkt-neutral-200: #C6C6C6;
  --tkt-neutral-300: #7A7A7A;
  --tkt-neutral-400: #545454;
  --tkt-neutral-500: #222222;
  --tkt-black: #000000;
}

/* --------------------------------------------------------------------------
   2. RAMPA DE MARCA
   O Mautic deriva --button-primary, --background-brand, --border-interactive,
   --focus, --link-* e --label-*-brand de --primary-20..100. Redefinindo a rampa,
   toda a UI muda de cor.

   Passo 60 = passo principal do Mautic -> vermelho Takeat 500 (#C8131B).
   Os passos 90 e 100 nao existem no design system (a escala Takeat termina em 700);
   sao derivados continuando o escurecimento em HSL com matiz preservado.

   Os seletores replicam a especificidade dos blocos [accent="NN"] do Mautic e
   carregam depois deles, portanto a marca Takeat vence qualquer accent escolhido
   na configuracao — o seletor de accent do Mautic passa a nao ter efeito, o que
   e proposital: identidade de marca nao deve ser trocavel pelo usuario.
   -------------------------------------------------------------------------- */
:root,
:root[accent],
:root[theme="light"]:root[accent],
:root[theme="dark"]:root[accent] {
  --primary-20:  #FAE8E9; /* red 100 */
  --primary-30:  #E5A1A4; /* red 200 */
  --primary-40:  #DB6E72; /* red 300 */
  --primary-50:  #D13F45; /* red 400 */
  --primary-60:  #C8131B; /* red 500 — principal */
  --primary-70:  #94090F; /* red 600 */
  --primary-80:  #610206; /* red 700 */
  --primary-90:  #360103; /* derivado */
  --primary-100: #0C0001; /* derivado */

  /* mantem os 25 slots de accent apontando para a marca */
  --accent01: #C8131B; --accent02: #C8131B; --accent03: #C8131B;
  --accent04: #C8131B; --accent05: #C8131B; --accent06: #C8131B;
  --accent07: #C8131B; --accent08: #C8131B; --accent09: #C8131B;
  --accent10: #C8131B; --accent11: #C8131B; --accent12: #C8131B;
  --accent13: #C8131B; --accent14: #C8131B; --accent15: #C8131B;
  --accent16: #C8131B; --accent17: #C8131B; --accent18: #C8131B;
  --accent19: #C8131B; --accent20: #C8131B; --accent21: #C8131B;
  --accent22: #C8131B; --accent23: #C8131B; --accent24: #C8131B;
  --accent25: #C8131B;
}

/* --------------------------------------------------------------------------
   3. RAIO DE BORDA  (tokens/radius.json)
   O Mautic vem com 0px em tudo (Carbon e quadrado). Takeat arredonda.
   -------------------------------------------------------------------------- */
:root {
  --border-radius-sm: 4px;   /* botoes pequenos e detalhes */
  --border-radius-md: 8px;   /* botoes medios, inputs, cards pequenos, dropdowns, tags */
  --border-radius-lg: 12px;  /* botoes grandes, cards medios, modais */
  --border-radius-xl: 16px;  /* cards grandes, modais (token novo: Mautic nao tem xl) */
}

/* --------------------------------------------------------------------------
   4. ELEVACAO  (tokens/shadows.json)
   O Mautic nao tem tokens de sombra — sao 89 box-shadow hardcoded. Aqui os
   tokens Takeat sao introduzidos e aplicados as superficies elevadas principais.
   -------------------------------------------------------------------------- */
:root {
  --tkt-shadow-01: 0 1px 2px 0 rgba(0,0,0,.14), 0 0 2px 0 rgba(0,0,0,.12);
  --tkt-shadow-02: 0 2px 4px 0 rgba(0,0,0,.14), 0 0 2px 0 rgba(0,0,0,.12);
  --tkt-shadow-03: 0 4px 8px 0 rgba(0,0,0,.14), 0 0 2px 0 rgba(0,0,0,.12);
  --tkt-shadow-04: 0 8px 16px 0 rgba(0,0,0,.14), 0 0 2px 0 rgba(0,0,0,.12);
  --tkt-shadow-05: 0 10px 25px 0 rgba(0,0,0,.14), 0 0 8px 0 rgba(0,0,0,.20);
}

/* --------------------------------------------------------------------------
   5. TIPOGRAFIA  (tokens/typography.json — escala Poppins)
   O Mautic tem 7 niveis de heading e uma escala fluid; o Takeat define 4 grupos
   (Title 22/18/16, Body 16/14/12, Label 14/12/11, Details 8). Onde a escala
   Takeat cobre o token, o valor Takeat e usado literalmente. Nos tamanhos
   grandes que o Takeat nao define (32px+), o tamanho do Mautic e preservado
   para nao achatar a hierarquia — muda apenas familia e peso.
   -------------------------------------------------------------------------- */
:root {
  /* Body — body.medium / body.large */
  --body-01-font-size: 14px; --body-01-line-height: 20px; --body-01-letter-spacing: 0.25px; --body-01-font-weight: 400;
  --body-02-font-size: 16px; --body-02-line-height: 24px; --body-02-letter-spacing: 0.5px;  --body-02-font-weight: 400;
  --body-compact-01-font-size: 14px; --body-compact-01-line-height: 20px; --body-compact-01-letter-spacing: 0.25px; --body-compact-01-font-weight: 400;
  --body-compact-02-font-size: 16px; --body-compact-02-line-height: 24px; --body-compact-02-letter-spacing: 0.5px;  --body-compact-02-font-weight: 400;

  /* Headings pequenos — label.large.semibold / title.small.semibold / title.medium / title.large */
  --heading-01-font-size: 14px; --heading-01-line-height: 20px; --heading-01-letter-spacing: 0.1px;  --heading-01-font-weight: 600;
  --heading-02-font-size: 16px; --heading-02-line-height: 24px; --heading-02-letter-spacing: 0.15px; --heading-02-font-weight: 600;
  --heading-compact-01-font-size: 14px; --heading-compact-01-line-height: 20px; --heading-compact-01-letter-spacing: 0.1px;  --heading-compact-01-font-weight: 600;
  --heading-compact-02-font-size: 16px; --heading-compact-02-line-height: 24px; --heading-compact-02-letter-spacing: 0.15px; --heading-compact-02-font-weight: 600;
  --heading-03-font-size: 18px; --heading-03-line-height: 24px; --heading-03-letter-spacing: 0px; --heading-03-font-weight: 600;
  --heading-04-font-size: 22px; --heading-04-line-height: 28px; --heading-04-letter-spacing: 0px; --heading-04-font-weight: 600;
  /* acima da escala Takeat: mantem tamanho, aplica peso Takeat */
  --heading-05-font-weight: 600;
  --heading-06-font-weight: 600;
  --heading-07-font-weight: 600;

  /* Label — label.medium.medium / label.large.medium */
  --label-01-font-size: 12px; --label-01-line-height: 16px; --label-01-letter-spacing: 0.5px; --label-01-font-weight: 500;
  --label-02-font-size: 14px; --label-02-line-height: 20px; --label-02-letter-spacing: 0.1px; --label-02-font-weight: 500;

  /* Helper / legal — body.small / body.medium */
  --helper-text-01-font-size: 12px; --helper-text-01-line-height: 16px; --helper-text-01-letter-spacing: 0.4px;  --helper-text-01-font-weight: 400;
  --helper-text-02-font-size: 14px; --helper-text-02-line-height: 20px; --helper-text-02-letter-spacing: 0.25px; --helper-text-02-font-weight: 400;
  --legal-01-font-size: 12px; --legal-01-line-height: 16px; --legal-01-letter-spacing: 0.4px;  --legal-01-font-weight: 400;
  --legal-02-font-size: 14px; --legal-02-line-height: 20px; --legal-02-letter-spacing: 0.25px; --legal-02-font-weight: 400;

  /* Densidade utilitaria: alinha aos tamanhos da escala Takeat */
  --typography-body-productive: 14px;   /* era 13px, fora da escala */
  --typography-body-expressive: 16px;   /* era 15px, fora da escala */
  --typography-utility-productive: 12px;
  --typography-utility-expressive: 14px;
}

/* Familia: o Mautic nao tem token de font-family — libraries.css fixa
   "Source Sans 3" em body. Poppins e' auto-hospedado (sem chamada externa). */
body,
.btn, button, input, select, textarea, optgroup,
.form-control, .modal-title, .nav, .dropdown-menu,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body { letter-spacing: 0.25px; }

/* unico ponto do app.css com font-family !important */
.heatmap-label > p { font-family: 'Poppins', Helvetica, Arial, sans-serif !important; }

/* nao aplica Poppins em codigo nem em icones */
code, pre, kbd, samp, .cm-editor, .CodeMirror,
[class^="ri-"], [class*=" ri-"], .remixicon {
  font-family: revert;
}

/* --------------------------------------------------------------------------
   6. CORES SEMANTICAS — TEMA CLARO
   Neutras Takeat nas superficies/textos; verde2/azul/amarelo/vermelho nos
   estados. Todos os pares abaixo foram verificados para WCAG AA
   (4.5:1 texto, 3:1 elementos de UI).
   -------------------------------------------------------------------------- */
:root:not([theme="dark"]) {  /* cobre theme="light" E paginas sem o atributo,
                              como a tela de login, que tem <html> sem theme */
  /* superficies */
  --background: #FFFFFF;                  /* white */
  --background-hover: #EDEDED;            /* neutral 100 */
  --background-inverse: #222222;          /* neutral 500 */
  --background-inverse-hover: #545454;    /* neutral 400 */
  --layer-01: #F6F6F6;                    /* neutral 50 */
  --layer-02: #FFFFFF;
  --layer-hover-01: #EDEDED;              /* neutral 100 */
  --layer-hover-02: #EDEDED;
  --layer-accent-01: #EDEDED;
  --layer-accent-02: #EDEDED;
  --layer-selected-01: #EDEDED;
  --layer-selected-02: #EDEDED;
  --layer-active-01: #C6C6C6;             /* neutral 200 */
  --layer-active-02: #C6C6C6;
  --field-01: #F6F6F6;
  --field-02: #FFFFFF;
  --field-hover-01: #EDEDED;
  --field-hover-02: #EDEDED;

  /* texto — neutral 500 (15.91:1), 400 (7.57:1), placeholder 300 (4.29:1) */
  --text-primary: #222222;
  --text-secondary: #545454;
  --text-helper: #545454;                 /* neutral 300 daria 4.29:1, abaixo de AA */
  --text-placeholder: #7A7A7A;            /* neutral 300 */
  --text-inverse: #FFFFFF;
  --text-on-color: #FFFFFF;               /* sobre red 500 = 5.89:1 */
  --text-error: #C8131B;                  /* red 500 = 5.89:1 */

  /* bordas */
  --border-subtle-01: #EDEDED;            /* neutral 100 */
  --border-subtle-02: #C6C6C6;            /* neutral 200 */
  --border-strong-01: #7A7A7A;            /* neutral 300 */
  --border-strong-02: #7A7A7A;
  --border-disabled: #C6C6C6;
  --border-inverse: #222222;
  --border-tile-01: #C6C6C6;
  --border-tile-02: #7A7A7A;

  /* icones */
  --icon-primary: #222222;
  --icon-secondary: #545454;
  --icon-inverse: #FFFFFF;
  --icon-on-color: #FFFFFF;

  /* estados — passos escolhidos por contraste sobre branco e sobre o tint 100 */
  --support-error: #C8131B;               /* red 500      — 5.89:1 */
  --support-success: #167532;             /* green2 600   — 5.79:1 */
  --support-warning: #99670F;             /* yellow 700   — 4.88:1 */
  --support-info: #016999;                /* blue 700     — 6.03:1 */
  --notification-background-error:   #FAE8E9;  /* red 100    */
  --notification-background-success: #EAF7EE;  /* green2 100 */
  --notification-background-warning: #FFF8EB;  /* yellow 100 */
  --notification-background-info:    #E6F7FF;  /* blue 100   */

  /* botao de perigo — vermelho da marca e o mesmo do erro */
  --button-danger-primary: #C8131B;
  --button-danger-secondary: #C8131B;
  --button-danger-hover: #94090F;
  --button-danger-active: #610206;
  --button-secondary: #222222;
  --button-secondary-hover: #545454;
  --button-secondary-active: #7A7A7A;
  --button-disabled: #C6C6C6;
  --button-separator: #EDEDED;

  --skeleton-background: #EDEDED;
  --skeleton-element: #C6C6C6;
  --toggle-off: #C6C6C6;
  --overlay: rgba(34,34,34,.40);
}

/* --------------------------------------------------------------------------
   7. CORES SEMANTICAS — TEMA ESCURO
   O design system Takeat nao define paleta escura. As superficies partem de
   neutral 500 (#222222 — o DS pede evitar preto puro em areas grandes) e os
   dois passos intermediarios sao derivados. Os estados usam os passos 300,
   que sao os legiveis sobre fundo escuro.
   -------------------------------------------------------------------------- */
:root[theme="dark"] {
  --background: #222222;                  /* neutral 500 */
  --background-hover: #2E2E2E;            /* derivado */
  --background-inverse: #F6F6F6;
  --background-inverse-hover: #EDEDED;
  --layer-01: #2E2E2E;                    /* derivado */
  --layer-02: #3B3B3B;                    /* derivado */
  --layer-hover-01: #3B3B3B;
  --layer-hover-02: #545454;              /* neutral 400 */
  --layer-accent-01: #3B3B3B;
  --layer-accent-02: #545454;
  --layer-selected-01: #3B3B3B;
  --layer-selected-02: #545454;
  --layer-active-01: #545454;
  --layer-active-02: #7A7A7A;
  --field-01: #2E2E2E;
  --field-02: #3B3B3B;
  --field-hover-01: #3B3B3B;
  --field-hover-02: #545454;

  --text-primary: #F6F6F6;                /* 14.72:1 */
  --text-secondary: #C6C6C6;              /* 9.31:1  */
  --text-helper: #9E9E9E;                 /* 5.94:1 — derivado; neutral 300 daria 3.71:1 */
  --text-placeholder: #7A7A7A;
  --text-inverse: #222222;
  --text-on-color: #FFFFFF;
  --text-error: #DB6E72;                  /* red 300 — 4.91:1 */

  --border-subtle-01: #3B3B3B;
  --border-subtle-02: #545454;
  --border-strong-01: #7A7A7A;
  --border-strong-02: #9E9E9E;
  --border-disabled: #545454;
  --border-inverse: #F6F6F6;

  --icon-primary: #F6F6F6;
  --icon-secondary: #C6C6C6;
  --icon-inverse: #222222;

  --support-error: #DB6E72;               /* red 300     — 4.91:1 */
  --support-success: #77BD8B;             /* green2 300  — 7.15:1 */
  --support-warning: #FFD894;             /* yellow 300  — 11.74:1 */
  --support-info: #66CFFF;                /* blue 300    — 9.04:1 */
  --notification-background-error:   #2E2E2E;
  --notification-background-success: #2E2E2E;
  --notification-background-warning: #2E2E2E;
  --notification-background-info:    #2E2E2E;

  --button-danger-primary: #C8131B;
  --button-danger-hover: #D13F45;
  --button-danger-active: #94090F;
  --button-secondary: #545454;
  --button-secondary-hover: #7A7A7A;
  --button-secondary-active: #9E9E9E;
  --button-disabled: #545454;
  --button-separator: #3B3B3B;

  --skeleton-background: #2E2E2E;
  --skeleton-element: #545454;
  --toggle-off: #7A7A7A;
  --overlay: rgba(0,0,0,.60);
}

/* No escuro os links/marca precisam dos passos claros da rampa */
:root[theme="dark"] {
  --link-primary: #E5A1A4;                /* red 200 — 7.55:1 */
  --link-primary-hover: #FAE8E9;
  --link-secondary: #FAE8E9;
  --interactive: #DB6E72;
  --icon-interactive: #DB6E72;
  --border-interactive: #DB6E72;
  --focus: #DB6E72;                       /* 4.91:1, acima do minimo 3:1 */
  --highlight: #610206;
}

/* --------------------------------------------------------------------------
   8. APLICACAO DA ELEVACAO
   Aqui nao existe costura de token no Mautic; as superficies elevadas
   principais recebem a escala Takeat diretamente. 02 e o default do DS.
   -------------------------------------------------------------------------- */
.panel, .card, .tkt-card { box-shadow: var(--tkt-shadow-02); }
.dropdown-menu, .popover, .tooltip-inner { box-shadow: var(--tkt-shadow-03); }
.modal-content { box-shadow: var(--tkt-shadow-05); }
#app-header.navbar { box-shadow: var(--tkt-shadow-01); }

/* Raio nas superficies que o Carbon deixa quadradas */
.panel, .card { border-radius: var(--border-radius-lg); }
.modal-content { border-radius: var(--border-radius-xl); }
.dropdown-menu, .popover { border-radius: var(--border-radius-md); }
.btn { border-radius: var(--border-radius-md); }
.btn-sm, .btn-xs { border-radius: var(--border-radius-sm); }
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  border-radius: var(--border-radius-md);
}
.label, .badge, .tag, .chip { border-radius: var(--border-radius-md); }