/* tokens.css — design tokens, Figma "Daniel Minutti" › Style Guide (23:25). Nomes 1:1 com o Figma. */

:root {

  /* Grey — 10 é preto, 130 é quase branco (direção oposta a blue/gold) */
  --dm-grey-10:  #000000;
  --dm-grey-20:  #131313;
  --dm-grey-30:  #262626;
  --dm-grey-40:  #393939;
  --dm-grey-50:  #4d4d4d;
  --dm-grey-60:  #606060;
  --dm-grey-70:  #737373;
  --dm-grey-80:  #868686;
  --dm-grey-90:  #999999;
  --dm-grey-100: #acacac;
  --dm-grey-110: #bfbfbf;
  --dm-grey-120: #d2d2d2;
  --dm-grey-130: #e6e6e6;
  --dm-white:    #ffffff;

  /* Blue — 10 é o mais claro, 90 o mais escuro */
  --dm-blue-10: #ecf1f8;
  --dm-blue-20: #d3d9e2;
  --dm-blue-30: #bac1cb;
  --dm-blue-40: #a2aab4;
  --dm-blue-50: #8b939e;
  --dm-blue-60: #747c87;
  --dm-blue-70: #5f6670;
  --dm-blue-80: #4a515a;
  --dm-blue-90: #363b43;

  /* Gold — 10 é o mais claro, 90 o mais escuro */
  --dm-gold-10: #fff4df;
  --dm-gold-20: #ffecc7;
  --dm-gold-30: #ffe3af;
  --dm-gold-40: #e4ca97;
  --dm-gold-50: #c7ae7e;
  --dm-gold-60: #aa9367;
  --dm-gold-70: #8d7852;
  --dm-gold-80: #705f3e;
  --dm-gold-90: #53452b;

  /* Semânticos — do Figma */
  /* ⚠ --dm-primary é claro (2,3:1 no branco) — cor de superfície, nunca de texto sobre fundo claro. */
  --dm-primary:     var(--dm-blue-40);
  --dm-primary-100: var(--dm-blue-30);

  /* Semânticos — inferidos (o Figma não nomeia estes papéis) */
  --dm-on-primary:     var(--dm-grey-10);
  --dm-primary-strong: var(--dm-blue-80);
  --dm-accent:         var(--dm-gold-60);
  --dm-on-accent:      var(--dm-grey-10);
  --dm-text:           var(--dm-grey-20);
  --dm-text-muted:     var(--dm-grey-60);
  --dm-text-invert:    var(--dm-white);
  --dm-surface:        var(--dm-white);
  --dm-surface-alt:    var(--dm-blue-10);
  --dm-surface-dark:   var(--dm-blue-90);
  --dm-border:         var(--dm-grey-130);
  --dm-focus:          var(--dm-blue-90);

  /* Gradientes da cortina — Figma "bg" da hero (4221:1841), reusada em outras páginas */
  --dm-gradient-glow: radial-gradient(
    45.28% 89.07% at 57.58% 90.83%,
    var(--dm-gold-60) 42.79%,
    #46638a 54.81%,
    var(--dm-grey-10) 100%
  );

  /* ⚠ rgba(70,99,138,0) é transparente COM matiz — trocar por `transparent` suja a interpolação com franja escura. */
  --dm-gradient-slat: linear-gradient(
   93deg, #AA9367 -4.62%, rgba(70, 99, 138, 0.00) 31.68%, #131313 73.79%);

  --dm-gradient-vignette: radial-gradient(
    ellipse 55.25% 108.69% at 61.43% 41.96%,
    rgba(0, 0, 0, 0) 3.537%,
    rgba(0, 0, 0, 1) 100%
  );

  --dm-gradient-backdrop: linear-gradient(
    142.16deg,
    rgba(0, 0, 0, 0) 43.877%,
    rgba(0, 0, 0, 0.8) 85.434%
  );

  /* Famílias */
  --dm-font-primary: 'Red Hat Display', system-ui, -apple-system, sans-serif;
  --dm-font-mono:    'Red Hat Mono', ui-monospace, SFMono-Regular, monospace;

  /* Escala de tamanhos — Figma "Display Size/displayN", fluida por clamp() */
  --dm-display-1: clamp(96px, 9.375vw, 180px);
  --dm-display-2: clamp(72px, 6.458vw, 124px);
  --dm-display-3: clamp(60px, 5.313vw, 102px);
  --dm-display-4: clamp(48px, 4.271vw,  82px);
  --dm-display-5: clamp(40px, 3.750vw,  72px);
  --dm-display-6: clamp(34px, 3.333vw,  64px);
  --dm-display-7: clamp(28px, 2.396vw,  46px);
  --dm-display-8: clamp(24px, 1.771vw,  34px);
  --dm-display-9: clamp(20px, 1.146vw,  22px);

  --dm-text-xl: clamp(18px, 1.042vw, 20px);
  --dm-text-lg: clamp(16px, 0.938vw, 18px);
  --dm-text-md: clamp(14px, 0.833vw, 16px);
  --dm-text-sm: clamp(13px, 0.729vw, 14px);
  --dm-text-xs: clamp(11px, 0.625vw, 12px);

  /* Espaçamento — Figma "Spacing/N". Até 16 fixo, de 24 pra cima fluido. */
  --dm-space-2:  2px;
  --dm-space-4:  4px;
  --dm-space-6:  6px;
  --dm-space-8:  8px;
  --dm-space-12: 12px;
  --dm-space-16: 16px;

  --dm-space-24:  clamp(16px,  1.250vw,  24px);
  --dm-space-32:  clamp(16px,  1.667vw,  32px);
  --dm-space-40:  clamp(20px,  2.083vw,  40px);
  --dm-space-48:  clamp(24px,  2.500vw,  48px);
  --dm-space-56:  clamp(28px,  2.917vw,  56px);
  --dm-space-64:  clamp(32px,  3.333vw,  64px);
  --dm-space-72:  clamp(36px,  3.750vw,  72px);
  --dm-space-80:  clamp(40px,  4.167vw,  80px);
  --dm-space-96:  clamp(48px,  5.000vw,  96px);
  --dm-space-120: clamp(60px,  6.250vw, 120px);
  --dm-space-200: clamp(100px, 10.417vw, 200px);
  --dm-space-260: clamp(130px, 13.542vw, 260px);
  --dm-space-320: clamp(160px, 16.667vw, 320px);

  /* ⚠ 0.415 = 83/200, sincronizado com a largura do logo (.site-header__logo) em header.css. */
  --dm-header-height: calc(
    var(--dm-space-16) * 2 + clamp(140px, 10.417vw, 200px) * 0.415
  );

  --dm-container-padding: clamp(16px, 4.167vw, 80px);

  --dm-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --dm-radius-sm:   8px;
  --dm-radius-md:  16px;
  --dm-radius-lg:  24px;
  --dm-radius-xl:  32px;
  --dm-radius-full: 999px;
  --dm-shadow-1: 0 2px 8px rgb(0 0 0 / 6%);
  --dm-shadow-2: 0 12px 32px rgb(0 0 0 / 12%);
}

/* ⚠ O mínimo de cada clamp aqui precisa bater com o máximo dos displays acima, para a curva ficar contínua nos 768px. */
@media (max-width: 768px) {
  :root {
    --dm-display-1: clamp(48px, 16.5vw, 96px);
    --dm-display-2: clamp(36px, 12.4vw, 72px);
    --dm-display-3: clamp(30px, 10.3vw, 60px);
    --dm-display-4: clamp(24px,  8.0vw, 48px);
    --dm-display-5: clamp(22px,  6.9vw, 40px);
    --dm-display-6: clamp(20px,  5.9vw, 34px);
    --dm-display-7: clamp(18px,  4.8vw, 28px);
    --dm-display-8: clamp(18px,  4.1vw, 24px);
    --dm-display-9: clamp(16px,  3.4vw, 20px);
  }
}

/* Classes utilitárias — 1:1 com os tokens acima */

/* Grey */
.bg-grey-10 { background-color: var(--dm-grey-10); }
.bg-grey-20 { background-color: var(--dm-grey-20); }
.bg-grey-30 { background-color: var(--dm-grey-30); }
.bg-grey-40 { background-color: var(--dm-grey-40); }
.bg-grey-50 { background-color: var(--dm-grey-50); }
.bg-grey-60 { background-color: var(--dm-grey-60); }
.bg-grey-70 { background-color: var(--dm-grey-70); }
.bg-grey-80 { background-color: var(--dm-grey-80); }
.bg-grey-90 { background-color: var(--dm-grey-90); }
.bg-grey-100 { background-color: var(--dm-grey-100); }
.bg-grey-110 { background-color: var(--dm-grey-110); }
.bg-grey-120 { background-color: var(--dm-grey-120); }
.bg-grey-130 { background-color: var(--dm-grey-130); }
.bg-white { background-color: var(--dm-white); }

.text-grey-10 { color: var(--dm-grey-10); }
.text-grey-20 { color: var(--dm-grey-20); }
.text-grey-30 { color: var(--dm-grey-30); }
.text-grey-40 { color: var(--dm-grey-40); }
.text-grey-50 { color: var(--dm-grey-50); }
.text-grey-60 { color: var(--dm-grey-60); }
.text-grey-70 { color: var(--dm-grey-70); }
.text-grey-80 { color: var(--dm-grey-80); }
.text-grey-90 { color: var(--dm-grey-90); }
.text-grey-100 { color: var(--dm-grey-100); }
.text-grey-110 { color: var(--dm-grey-110); }
.text-grey-120 { color: var(--dm-grey-120); }
.text-grey-130 { color: var(--dm-grey-130); }
.text-white { color: var(--dm-white); }

/* Blue */
.bg-blue-10 { background-color: var(--dm-blue-10); }
.bg-blue-20 { background-color: var(--dm-blue-20); }
.bg-blue-30 { background-color: var(--dm-blue-30); }
.bg-blue-40 { background-color: var(--dm-blue-40); }
.bg-blue-50 { background-color: var(--dm-blue-50); }
.bg-blue-60 { background-color: var(--dm-blue-60); }
.bg-blue-70 { background-color: var(--dm-blue-70); }
.bg-blue-80 { background-color: var(--dm-blue-80); }
.bg-blue-90 { background-color: var(--dm-blue-90); }

.text-blue-10 { color: var(--dm-blue-10); }
.text-blue-20 { color: var(--dm-blue-20); }
.text-blue-30 { color: var(--dm-blue-30); }
.text-blue-40 { color: var(--dm-blue-40); }
.text-blue-50 { color: var(--dm-blue-50); }
.text-blue-60 { color: var(--dm-blue-60); }
.text-blue-70 { color: var(--dm-blue-70); }
.text-blue-80 { color: var(--dm-blue-80); }
.text-blue-90 { color: var(--dm-blue-90); }

/* Gold */
.bg-gold-10 { background-color: var(--dm-gold-10); }
.bg-gold-20 { background-color: var(--dm-gold-20); }
.bg-gold-30 { background-color: var(--dm-gold-30); }
.bg-gold-40 { background-color: var(--dm-gold-40); }
.bg-gold-50 { background-color: var(--dm-gold-50); }
.bg-gold-60 { background-color: var(--dm-gold-60); }
.bg-gold-70 { background-color: var(--dm-gold-70); }
.bg-gold-80 { background-color: var(--dm-gold-80); }
.bg-gold-90 { background-color: var(--dm-gold-90); }

.text-gold-10 { color: var(--dm-gold-10); }
.text-gold-20 { color: var(--dm-gold-20); }
.text-gold-30 { color: var(--dm-gold-30); }
.text-gold-40 { color: var(--dm-gold-40); }
.text-gold-50 { color: var(--dm-gold-50); }
.text-gold-60 { color: var(--dm-gold-60); }
.text-gold-70 { color: var(--dm-gold-70); }
.text-gold-80 { color: var(--dm-gold-80); }
.text-gold-90 { color: var(--dm-gold-90); }

/* Semânticos */
.bg-primary      { background-color: var(--dm-primary); }
.bg-accent       { background-color: var(--dm-accent); }
.bg-surface      { background-color: var(--dm-surface); }
.bg-surface-alt  { background-color: var(--dm-surface-alt); }
.bg-surface-dark { background-color: var(--dm-surface-dark); }

.text-primary    { color: var(--dm-primary); }
.text-accent     { color: var(--dm-accent); }
.text-muted      { color: var(--dm-text-muted); }
.text-invert     { color: var(--dm-text-invert); }
.text-on-primary { color: var(--dm-on-primary); }