/* ============================================================
   GP Design System — Design Tokens v2
   Fonte: Figma > GP - Design Tokens > Colors
   Atualizado em: 2026-03-27
   NÃO EDITAR MANUALMENTE — sincronizar via Figma > Tokens Studio
   ============================================================ */

:root {

  /* ── Brand / Primary ─────────────────────────────────────── */
  --brand-color-primary-pure:    #2c3e51;
  --brand-color-primary-dark:    #344a62;
  --brand-color-primary-medium:  #3e5977;
  --brand-color-primary-light:   #45678d;

  /* ── Brand / Secondary ───────────────────────────────────── */
  --brand-color-secondary-pure:   #4dffcd;
  --brand-color-secondary-dark:   #07989c;
  --brand-color-secondary-medium: #45c6ca;
  --brand-color-secondary-light:  #4ad8b0;

  /* ── Brand / Gradient ────────────────────────────────────── */
  --brand-gradient-pure: linear-gradient(270deg, #4dffcd 0%, #45c6ca 100%);
  --brand-gradient-dark: linear-gradient(90deg, #07989c 0%, #45c6ca 60.58%, #4dffcd 100%);

  /* ── Highlight ───────────────────────────────────────────── */
  --highlight-color-pure:   #8250df;
  --highlight-color-dark:   #342059;
  --highlight-color-medium: #c0a7ef;
  --highlight-color-light:  #e6dcf9;

  /* ── Neutral / Low ───────────────────────────────────────── */
  --neutral-color-low-pure:   #657281;
  --neutral-color-low-dark:   #788799;
  --neutral-color-low-medium: #8798ac;
  --neutral-color-low-light:  #9cafc6;

  /* ── Neutral / High ──────────────────────────────────────── */
  --neutral-color-high-pure:   #ffffff;
  --neutral-color-high-light:  #f0f0f0;
  --neutral-color-high-medium: #dedede;
  --neutral-color-high-dark:   #f1f5f8;

  /* ── Neutral / Dark ──────────────────────────────────────── */
  --neutral-color-dark-pure:   #252525;
  --neutral-color-dark-dark:   #343434;
  --neutral-color-dark-medium: #464646;
  --neutral-color-dark-light:  #535353;

  /* ── Feedback / Positive ─────────────────────────────────── */
  --positive-color-pure:   #1ca36f;
  --positive-color-dark:   #0b412c;
  --positive-color-medium: #8dd1b7;
  --positive-color-light:  #d2ede2;

  /* ── Feedback / Warning ──────────────────────────────────── */
  --warning-color-pure:   #ffb300;
  --warning-color-dark:   #664800;
  --warning-color-medium: #ffd97f;
  --warning-color-light:  #fff0cc;

  /* ── Feedback / Informative ──────────────────────────────── */
  --informative-color-pure:   #1976d2;
  --informative-color-dark:   #0a2f54;
  --informative-color-medium: #8cbae8;
  --informative-color-light:  #d1e4f6;

  /* ── Feedback / Negative ─────────────────────────────────── */
  --negative-color-pure:   #d0382d;
  --negative-color-dark:   #531612;
  --negative-color-medium: #e79b96;
  --negative-color-light:  #f6d7d5;

  /* ── Typography / Font Family ────────────────────────────── */
  --font-family-base: 'Source Sans 3', 'Source Sans Pro', sans-serif;

  /* ── Typography / Font Weight ────────────────────────────── */
  --font-weight-bold:     700;
  --font-weight-semibold: 600;
  --font-weight-medium:   500;
  --font-weight-regular:  400;

  /* ── Typography / Font Size ──────────────────────────────── */
  --font-size-nano:  10px;
  --font-size-micro: 12px;
  --font-size-xxxs:  14px;
  --font-size-xxs:   16px;
  --font-size-xs:    20px;
  --font-size-sm:    24px;
  --font-size-md:    28px;
  --font-size-lg:    32px;
  --font-size-xl:    40px;
  --font-size-xxl:   48px;
  --font-size-xxxl:  56px;
  --font-size-huge:  64px;
  --font-size-mega:  72px;
  --font-size-giga:  80px;

  /* ── Typography / Letter Spacing ─────────────────────────── */
  --letter-spacing-default: 0;

  /* ── Spacing ─────────────────────────────────────────────── */
  --spacing-quark: 4px;
  --spacing-nano:  8px;
  --spacing-micro: 12px;
  --spacing-4xs:   16px;
  --spacing-3xs:   20px;
  --spacing-2xs:   24px;
  --spacing-xs:    32px;
  --spacing-sm:    40px;
  --spacing-md:    48px;
  --spacing-lg:    56px;
  --spacing-xl:    64px;
  --spacing-2xl:   72px;
  --spacing-3xl:   80px;
  --spacing-mega:  96px;
  --spacing-2mega: 120px;
  --spacing-3mega: 160px;
  --spacing-giga:  200px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-weak:     0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 8px 0px rgba(0,0,0,0.08);
  --shadow-moderate: 0px 0px 4px 0px rgba(0,0,0,0.08), 0px 6px 12px 0px rgba(0,0,0,0.12);
  --shadow-intense:  0px 0px 4px 0px rgba(0,0,0,0.08), 0px 8px 16px 0px rgba(0,0,0,0.16);
  --shadow-strong:   0px 0px 4px 0px rgba(0,0,0,0.08), 0px 12px 20px 0px rgba(0,0,0,0.20);

  /* ── Opacity ─────────────────────────────────────────────── */
  --opacity-semiopaque: 0.80; /* $opacity-semiopaque */
  --opacity-intense:    0.56; /* $opacity-intense    */
  --opacity-medium:     0.32; /* $opacity-medium     */
  --opacity-light:      0.16; /* $opacity-light      */

  /* ── Button Component Tokens ─────────────────────────────── */

  /* Default */
  --btn-color-bg-filled:        var(--brand-color-secondary-dark);   /* #07989c */
  --btn-color-bg-outline:       transparent;
  --btn-color-border:           var(--brand-color-secondary-dark);   /* #07989c */
  --btn-color-label-onfill:     var(--neutral-color-high-pure);      /* #ffffff */
  --btn-color-label-onoutline:  var(--brand-color-secondary-dark);   /* #07989c */

  /* Hover — bg mint, text dark (todos os variants) */
  --btn-color-hover-bg:         var(--brand-color-secondary-pure);   /* #4dffcd */
  --btn-color-hover-border:     var(--brand-color-secondary-pure);   /* #4dffcd */
  --btn-color-hover-label:      var(--brand-color-primary-pure);     /* #2c3e51 */

  /* Selected — Secondary vira filled */
  --btn-color-selected-bg:      var(--brand-color-secondary-dark);   /* #07989c */
  --btn-color-selected-label:   var(--neutral-color-high-pure);      /* #ffffff */

  /* Disabled — cor real, não opacity */
  --btn-color-disabled-bg:      var(--neutral-color-low-pure);       /* #657281 */
  --btn-color-disabled-border:  var(--neutral-color-low-pure);       /* #657281 */
  --btn-color-disabled-label:   var(--neutral-color-low-light);      /* #9cafc6 */

  /* OnColor — Primary (Filled) em fundo escuro */
  --btn-on-filled-bg:            var(--brand-color-secondary-pure);   /* #4dffcd */
  --btn-on-filled-border:        var(--brand-color-secondary-pure);   /* #4dffcd */
  --btn-on-filled-label:         var(--brand-color-primary-pure);     /* #2c3e51 */
  /* Hover: Filled → vira Outline (transparente + borda mint + texto mint) */
  --btn-on-filled-hover-bg:      transparent;
  --btn-on-filled-hover-border:  var(--brand-color-secondary-pure);   /* #4dffcd */
  --btn-on-filled-hover-label:   var(--brand-color-secondary-pure);   /* #4dffcd */

  /* OnColor — Outline (Secondary/Terciary) em fundo escuro */
  --btn-on-outline-border:       var(--brand-color-secondary-pure);   /* #4dffcd */
  --btn-on-outline-label:        var(--brand-color-secondary-pure);   /* #4dffcd */
  --btn-on-outline-hover-bg:     var(--brand-color-secondary-pure);   /* #4dffcd */
  --btn-on-outline-hover-border: var(--brand-color-secondary-pure);   /* #4dffcd */
  --btn-on-outline-hover-label:  var(--brand-color-primary-pure);     /* #2c3e51 */

  /* Focus ring */
  --btn-focus-ring-color:       var(--highlight-color-pure);         /* #8250df */
  --btn-focus-ring-width:       var(--btn-border-width-focus);

  /* Typography */
  --btn-font-size-sm:           var(--font-size-xxxs);  /* 14px */
  --btn-font-size-md:           var(--font-size-xxs);   /* 16px */
  --btn-font-size-lg:           var(--font-size-xs);    /* 20px */
  --btn-font-weight:            700;

  /* Spacing */
  --btn-padding-v-sm:           var(--spacing-nano);    /* 8px  */
  --btn-padding-v-md:           var(--spacing-micro);   /* 12px */
  --btn-padding-h-sm:           var(--spacing-2xs);     /* 24px */
  --btn-padding-h-md:           var(--spacing-xs);      /* 32px */
  --btn-gap:                    var(--spacing-nano);    /* 8px  */

  /* Border */
  --btn-border-width:           1px;
  --btn-border-width-focus:     2px;
  --btn-border-radius:          0px;

}