/**
 * YES Elétrica — Design Tokens
 * Cores, tipografia, espaçamento, raios, sombras.
 * Esta é a fonte da verdade — TODA cor/tipo/espaço deve sair daqui.
 */

:root {
  /* ===== Brand ====================================== */
  --brand-deep:    #1A1170;
  --brand-violet:  #3D1A8F;
  --brand-teal:    #0EA5A5;     /* decorativo: borders, atom, gradients, accents */
  --brand-teal-700:#0F6E56;     /* TEXTO em fundo claro + CTA bg (5.6:1 white — passa AA) */
  --brand-teal-2:  #14B8A6;     /* fundo escuro (footer): passa AAA em #0B0B2E */
  --brand-teal-3:  #5DE2C8;
  --accent-yellow: #FBC72E;
  --accent-yellow-2: #FFE082;

  /* ===== Surfaces (light → dark) ==================== */
  --surface-base:  #FFFFFF;
  --surface-soft:  #F5F7FB;
  --surface-card:  #FFFFFF;
  --surface-dark:  #0B0B2E;

  /* ===== Ink (text) ================================ */
  --ink-primary:        #0F1235;
  --ink-secondary:      #4B5573;
  --ink-muted:          #5F6680;     /* WCAG AA: 5.68:1 em white, 5.29:1 em surface-soft */
  --ink-on-dark:        #E7E9F5;
  --ink-on-dark-muted:  #A6ABCB;

  /* ===== Border ==================================== */
  --border-subtle: #E6E9F2;
  --border-strong: #C9CFE0;
  --border-dark:   rgba(255,255,255,.10);

  /* ===== Type ======================================= */
  /* Stack tipográfico: Bricolage Grotesque domina (display + body — uma única
     família traz cohesão e identidade. Skill frontend-design proíbe Inter). */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --fs-xs:   0.72rem;
  --fs-sm:   0.86rem;
  --fs-base: 1rem;
  --fs-md:   1.06rem;
  --fs-lg:   1.18rem;
  --fs-xl:   1.4rem;
  --fs-2xl:  1.85rem;
  --fs-3xl:  2.4rem;
  --fs-4xl:  3.2rem;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-wide:    0.12em;
  --tracking-wider:   0.22em;

  /* ===== Spacing scale (4px base) ================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ===== Radius ===================================== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ===== Shadow (low elevation by default) ========= */
  --shadow-soft: 0 1px 2px rgba(15, 18, 53, .04), 0 4px 14px rgba(15, 18, 53, .04);
  --shadow-pop:  0 8px 24px rgba(26, 17, 112, .12), 0 2px 6px rgba(15, 18, 53, .06);
  --shadow-cta:  0 8px 18px rgba(14, 165, 165, .35);

  /* ===== Layout ===================================== */
  --container-max: 1240px;
  --container-pad: 24px;       /* mobile (Apple HIG / Material padrão — respiro confortável) */

  /* ===== Z-index ==================================== */
  --z-header: 50;
  --z-modal:  100;

  /* ===== Motion ===================================== */
  --ease-out:  cubic-bezier(.25, .8, .35, 1);
  --t-fast:    .15s;
  --t-base:    .25s;
  --t-slow:    .55s;
}

@media (min-width: 720px) {
  :root {
    --container-pad: var(--space-6);
  }
}