/* ============================================
   Fidelidade Design System — Tokens
   Consolidated: colors, typography, spacing
   Source: _resources/Oficial-CoE/tokens/
   ============================================ */

/* ── Color Primitives ── */

:root {
  --color-fidelidade-50: #fff2f1;
  --color-fidelidade-100: #ffe2e0;
  --color-fidelidade-200: #ffcac6;
  --color-fidelidade-300: #ffa59e;
  --color-fidelidade-400: #ff7b65;
  --color-fidelidade-500: #e42313;
  --color-fidelidade-600: #c61d0f;
  --color-fidelidade-700: #a41b10;
  --color-fidelidade-800: #871e15;
  --color-fidelidade-900: #4a0a05;

  --color-multicare-50: #fff7e5;
  --color-multicare-100: #ffeab7;
  --color-multicare-200: #ffdd8c;
  --color-multicare-300: #fed640;
  --color-multicare-400: #fec800;
  --color-multicare-500: #efab00;
  --color-multicare-600: #d19200;
  --color-multicare-700: #b38000;
  --color-multicare-800: #8f6700;
  --color-multicare-900: #533c00;

  --color-gray-50: #fafafa;
  --color-gray-100: #f2f2f2;
  --color-gray-200: #e7e8e8;
  --color-gray-300: #d7dbdb;
  --color-gray-400: #c2c5c5;
  --color-gray-500: #a1a4a4;
  --color-gray-600: #656769;
  --color-gray-700: #3a3c3c;
  --color-gray-800: #282a2a;
  --color-gray-900: #161717;

  --color-blue-50: #e4f4f7;
  --color-blue-100: #d0eaec;
  --color-blue-200: #c0dee2;
  --color-blue-300: #a6d1d6;
  --color-blue-400: #8ec5ca;
  --color-blue-500: #68b0b8;
  --color-blue-600: #409da7;
  --color-blue-700: #007c89;
  --color-blue-800: #006f7d;
  --color-blue-900: #00535e;

  --color-green-50: #eaf9e8;
  --color-green-100: #d8f3d7;
  --color-green-200: #caf0c3;
  --color-green-300: #b3e8b0;
  --color-green-400: #99d990;
  --color-green-500: #79c574;
  --color-green-600: #5db057;
  --color-green-700: #008539;
  --color-green-800: #006d23;
  --color-green-900: #004700;

  --color-orange-50: #fff8ec;
  --color-orange-100: #ffefd2;
  --color-orange-200: #ffdba4;
  --color-orange-300: #ffc16b;
  --color-orange-400: #ff9b2f;
  --color-orange-500: #ff7c07;
  --color-orange-600: #f95f00;
  --color-orange-700: #cc4500;
  --color-orange-800: #a33709;
  --color-orange-900: #662500;

  --color-red-50: #fff2f0;
  --color-red-100: #ffe2dd;
  --color-red-200: #ffcac1;
  --color-red-300: #ffa496;
  --color-red-400: #ff715a;
  --color-red-500: #ff4527;
  --color-red-600: #e72406;
  --color-red-700: #ae1d06;
  --color-red-800: #901e0c;
  --color-red-900: #660e00;

  --color-white-1000: #ffffff;
  --color-white-500: rgba(255, 255, 255, 0.5);
  --color-white-400: rgba(255, 255, 255, 0.4);
  --color-white-200: rgba(255, 255, 255, 0.2);
  --color-white-100: rgba(255, 255, 255, 0.1);
  --color-white-0: rgba(255, 255, 255, 0);
}

/* ── Theme: Fidelidade (default) ── */

:root,
[data-theme='fidelidade'] {
  --brand-primary-50: #fff2f1;
  --brand-primary-100: #ffe2e0;
  --brand-primary-200: #ffcac6;
  --brand-primary-300: #ffa59e;
  --brand-primary-400: #ff7b65;
  --brand-primary-500-main: #e42313;
  --brand-primary-600: #c61d0f;
  --brand-primary-700: #a41b10;
  --brand-primary-800: #871e15;
  --brand-primary-900: #4a0a05;

  --neutral-white: #ffffff;
  --neutral-neutral-50: #fafafa;
  --neutral-neutral-100: #f2f2f2;
  --neutral-neutral-200: #e7e8e8;
  --neutral-neutral-300: #d7dbdb;
  --neutral-neutral-400: #c2c5c5;
  --neutral-neutral-500: #a1a4a4;
  --neutral-neutral-600: #656769;
  --neutral-neutral-700: #3a3c3c;
  --neutral-neutral-800: #282a2a;
  --neutral-neutral-900: #161717;

  /* Readable muted text on white (~4.5:1). Do not use neutral-500/400 for body text on light backgrounds. */
  --text-secondary-on-light: var(--neutral-neutral-600);
  --text-caption-on-light: var(--neutral-neutral-600);

  /* Buttons — light background */
  --buttons-light-background-primary-default: #e42313;
  --buttons-light-background-primary-hover: #a41b10;
  --buttons-light-background-primary-pressed: #871e15;
  --buttons-light-background-disable-on-primary: #e7e8e8;
  --buttons-light-background-disable-on-others: #fafafa;
  --buttons-light-background-secondary-default: rgba(255, 255, 255, 0);
  --buttons-light-background-secondary-hover: rgba(255, 255, 255, 0.2);
  --buttons-light-background-secondary-pressed: rgba(255, 255, 255, 0.4);
  --buttons-light-background-destructive-default: #ffffff;
  --buttons-light-background-destructive-hover: #fff2f0;
  --buttons-light-background-destructive-pressed: #ffe2dd;
  --buttons-light-background-ghost-default: rgba(255, 255, 255, 0);
  --buttons-light-background-ghost-hover: rgba(0, 0, 0, 0.03);
  --buttons-light-background-ghost-pressed: rgba(0, 0, 0, 0.06);

  /* Buttons — brand background */
  --buttons-brand-background-primary-default: #282a2a;
  --buttons-brand-background-primary-hover: #3a3c3c;
  --buttons-brand-background-primary-pressed: #161717;
  --buttons-brand-background-disable-on-primary: #656769;
  --buttons-brand-background-disable-on-others: #e7e8e8;
  --buttons-brand-background-secondary-default: rgba(255, 255, 255, 0);
  --buttons-brand-background-secondary-hover: rgba(255, 255, 255, 0.1);
  --buttons-brand-background-secondary-pressed: rgba(255, 255, 255, 0.2);
  --buttons-brand-background-destructive: #901e0c;
  --buttons-brand-background-destructive-hover: rgba(255, 255, 255, 0.1);
  --buttons-brand-background-destructive-pressed: #660e00;
  --buttons-brand-background-ghost-default: rgba(255, 255, 255, 0);
  --buttons-brand-background-ghost-hover: rgba(0, 0, 0, 0.05);
  --buttons-brand-background-ghost-pressed: rgba(0, 0, 0, 0.1);

  /* Buttons — dark background */
  --buttons-dark-background-primary-default: #e42313;
  --buttons-dark-background-primary-hover: #a41b10;
  --buttons-dark-background-primary-pressed: #871e15;
  --buttons-dark-background-disable-on-primary: #656769;
  --buttons-dark-background-disable-on-others: #3a3c3c;
  --buttons-dark-background-secondary-default: rgba(255, 255, 255, 0);
  --buttons-dark-background-secondary-hover: #f2f2f2;
  --buttons-dark-background-secondary-pressed: #e7e8e8;
  --buttons-dark-background-destructive-default: rgba(255, 255, 255, 0);
  --buttons-dark-background-destructive-hover: #e72406;
  --buttons-dark-background-destructive-pressed: #ff4527;
  --buttons-dark-background-ghost-default: rgba(255, 255, 255, 0);
  --buttons-dark-background-ghost-hover: rgba(0, 0, 0, 0.12);
  --buttons-dark-background-ghost-pressed: rgba(0, 0, 0, 0.24);

  /* Borders */
  --border-light-background-disable: #c2c5c5;
  --border-light-background-secondary-default: #3a3c3c;
  --border-light-background-secondary-hover: #e42313;
  --border-light-background-secondary-pressed: #a41b10;
  --border-light-background-primary-pressed: #a41b10;
  --border-light-background-destructive-default: #901e0c;
  --border-light-background-destructive-pressed: #ae1d06;
  --border-brand-background-disable: #a1a4a4;
  --border-brand-background-secondary-default: #ffffff;
  --border-brand-background-secondary-hover: #f2f2f2;
  --border-brand-background-secondary-pressed: #f2f2f2;
  --border-brand-background-destructive-hover: #901e0c;
  --border-dark-background-disable-on-others: #656769;
  --border-dark-background-secondary-default: #ffffff;
  --border-dark-background-secondary-hover: #f2f2f2;
  --border-dark-background-secondary-pressed: #f2f2f2;
  --border-dark-background-destructive-default: #ff715a;
  --border-dark-background-destructive-pressed: #e72406;

  /* Text & Icon */
  --text-light-background-on-primary: #ffffff;
  --text-light-background-on-secondary: #282a2a;
  --text-light-background-on-disable: #656769;
  --text-light-background-on-destructive: #660e00;
  --text-brand-background-on-primary: #ffffff;
  --text-brand-background-on-secondary: #ffffff;
  --text-brand-background-on-disable-on-primary: #e7e8e8;
  --text-brand-background-on-disable-on-others: #656769;
  --text-brand-background-on-destructive: #ffffff;
  --text-brand-background-on-destructive-hover: #901e0c;
  --text-brand-background-on-ghost-destructive: #660e00;
  --text-dark-background-on-primary: #ffffff;
  --text-dark-background-on-secondary: #ffffff;
  --text-dark-background-on-disable: #e7e8e8;
  --text-dark-background-on-destructive: #ff715a;
  --text-dark-background-on-destructive-hover-and-pressed: #ffffff;
  --text-dark-background-on-secondary-hover-and-pressed: #3a3c3c;

  --icon-light-background-on-primary: #ffffff;
  --icon-light-background-on-secondary: #282a2a;
  --icon-light-background-on-disable: #656769;
  --icon-light-background-on-secondary-hover-and-pressed: #e42313;
  --icon-brand-background-on-primary: #ffffff;
  --icon-brand-background-on-secondary: #ffffff;
  --icon-brand-background-on-disable: #e7e8e8;
  --icon-brand-background-on-disable-on-others: #656769;
  --icon-brand-background-on-desruptive: #ffffff;
  --icon-brand-background-on-desruptive-hover: #901e0c;
  --icon-dark-background-on-primary: #ffffff;
  --icon-dark-background-on-secondary: #ffffff;
  --icon-dark-background-on-disable: #e7e8e8;
  --icon-dark-background-on-destructive: #ff715a;
  --icon-dark-background-on-destructive-hover-and-pressed: #ffffff;
  --icon-dark-background-on-secondary-hover-and-pressed: #3a3c3c;
  --icon-dark-background-on-ghost: #ffffff;

  /* Semantic */
  --semantic-error-border: #ff715a;
  --semantic-warning-border: #ff9b2f;
  --semantic-info-border: #8ec5ca;
  --semantic-success-border: #99d990;

  --semantic-success-bg: #f0fdf4;
  --semantic-success-text: #166534;
  --semantic-warning-bg: #fffbeb;
  --semantic-warning-text: #92400e;
  --semantic-error-bg: #fef2f2;
  --semantic-error-text: #991b1b;

  /* Shadows & Overlays */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --overlay-scrim: rgba(0, 0, 0, 0.5);

  /* Header */
  --header-default: #ffffff;
  --header-on-image: rgba(255, 255, 255, 0.1);
}

/* ── Theme: Multicare ── */

[data-theme='multicare'] {
  --brand-primary-50: #fff7e5;
  --brand-primary-100: #ffeab7;
  --brand-primary-200: #ffdd8c;
  --brand-primary-300: #fed640;
  --brand-primary-400: #fec800;
  --brand-primary-500-main: #efab00;
  --brand-primary-600: #d19200;
  --brand-primary-700: #b38000;
  --brand-primary-800: #8f6700;
  --brand-primary-900: #533c00;

  /* Buttons — light background */
  --buttons-light-background-primary-default: #fec800;
  --buttons-light-background-primary-hover: #efab00;
  --buttons-light-background-primary-pressed: #d19200;

  /* Buttons — brand background */
  --buttons-brand-background-secondary-hover: rgba(0, 0, 0, 0.05);
  --buttons-brand-background-secondary-pressed: rgba(0, 0, 0, 0.1);

  /* Buttons — dark background */
  --buttons-dark-background-primary-default: #fec800;
  --buttons-dark-background-primary-hover: #efab00;

  /* Text & Icon (overrides) */
  --text-light-background-on-primary: #282a2a;
  --text-brand-background-on-secondary: #282a2a;
  --text-dark-background-on-primary: #282a2a;
  --icon-light-background-on-primary: #282a2a;
  --icon-brand-background-on-secondary: #282a2a;
  --icon-dark-background-on-primary: #282a2a;

  /* Borders */
  --border-light-background-secondary-hover: #fec800;
  --border-light-background-secondary-pressed: #efab00;
  --border-light-background-primary-pressed: #d19200;
  --border-light-background-destructive-pressed: #901e0c;
  --border-brand-background-secondary-default: #3a3c3c;
  --border-brand-background-secondary-hover: #3a3c3c;
  --border-brand-background-secondary-pressed: #282a2a;
}

/* ── Typography — Desktop (default) ── */

:root {
  --font-family-primary: 'Azo Sans', sans-serif;

  --font-size-display: 80px;
  --line-height-display: 96px;
  --font-size-h1: 56px;
  --line-height-h1: 67.2px;
  --font-size-h2: 40px;
  --line-height-h2: 48px;
  --font-size-h3: 32px;
  --line-height-h3: 38.4px;
  --font-size-h4: 28px;
  --line-height-h4: 33.6px;
  --font-size-h5: 24px;
  --line-height-h5: 28.8px;
  --font-size-h6: 20px;
  --line-height-h6: 24px;
  --font-size-b1: 18px;
  --line-height-b1: 27px;
  --font-size-b2: 16px;
  --line-height-b2: 25.6px;
  --font-size-b3: 14px;
  --line-height-b3: 22.4px;
  --font-size-caption: 12px;
  --font-size-caption-caps: 12px;
  --letter-spacing-caption-caps: 3px;
  --font-size-a1: 18px;
  --font-size-a2: 16px;
  --font-size-subheader: 18px;
  --letter-spacing-subheader: 4px;
}

/* ── Typography — Tablet (768px–1023px) ── */

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --font-size-display: 56px;
    --line-height-display: 64.4px;
    --font-size-h1: 46px;
    --line-height-h1: 55.2px;
  }
}

/* ── Typography — Mobile (≤767px) ── */

@media (max-width: 767px) {
  :root {
    --font-size-display: 56px;
    --line-height-display: 64.4px;
    --font-size-h1: 36px;
    --font-size-h2: 32px;
    --font-size-h3: 28px;
    --font-size-h4: 24px;
    --font-size-h5: 22px;
    --font-size-h6: 18px;
    --font-size-subheader: 16px;
  }
}

/* ── Spacing & Layout ── */

:root {
  --padding-extra-large: 16px;
  --padding-large: 12px;
  --radius-large: 20px;
  --radius-base: 16px;
  --radius-small: 12px;
  --radius-none: 0px;
  --radius-full: 1000px;
  --spacing-extra-small: 8px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --breakpoint-margin: 20px;
  --breakpoint-columns: 12px;
  --breakpoint-gutter: 24px;
  --breakpoint-viewport-size: 1440px;
}

@media (max-width: 767px) {
  :root {
    --radius-large: 16px;
  }
}