/* ==========================================================================
   tokens.css — Design tokens (fonte única de verdade do visual)
   --------------------------------------------------------------------------
   - Prefixo --tp-ds- (evita conflito com --bs- do Bootstrap).
   - Camada 1: PRIMITIVOS (valores brutos do Figma).
   - Camada 2: SEMÂNTICOS (o que os módulos usam).
   - Tokens responsivos são redefinidos nas media queries no fim do arquivo.
   - Cores, fontes e movimento: confirmados (Figma + design system do site atual).
   - Tamanhos/espaçamentos marcados com TODO aguardam a referência definitiva.

   Breakpoints (mobile-first, usar valores literais nas media queries):
     mobile   0–767px     (Figma 390)   base, sem media query
     tablet   ≥ 768px     (Figma 768)   @media (min-width: 768px)
     desktop  ≥ 1440px    (Figma 1440)  @media (min-width: 1440px)
     wide     ≥ 1990px    (Figma 1990)  @media (min-width: 1990px)
     ultra    ≥ 1991px    conteúdo travado em --tp-ds-container-max;
                          fundos e carrosséis full-bleed se estendem
   ========================================================================== */

:root {
  /* ---------- Breakpoints (para JS via matchMedia; CSS usa literais) ---------- */
  --tp-ds-bp-tablet: 768px;
  --tp-ds-bp-desktop: 1440px;
  --tp-ds-bp-wide: 1990px;

  /* ======================= PRIMITIVOS ======================= */

  /* Cores — nomes espelham as variáveis do Figma (Background/*, Elements/*).
     Valores confirmados no Figma e no design system do site atual (LayoutV2.css). */

  /* Background/* */
  --tp-ds-bg-default: #ffffff;
  --tp-ds-bg-black: #000000;
  --tp-ds-bg-inverse: #010101;
  --tp-ds-bg-neutral-subtle: #f4f6f8;
  --tp-ds-bg-neutral-medium: #e7ebee;
  --tp-ds-bg-neutral-strong: #ced6de;
  --tp-ds-bg-neutral-dark: #3e4854;
  --tp-ds-bg-primary-subtle: #ece8ff;
  --tp-ds-bg-primary-strong: #8051ff;
  --tp-ds-bg-secondary-strong: #4d3293;

  /* Elements/Title/* */
  --tp-ds-title-default: #010101;
  --tp-ds-title-inverse: #ffffff;
  --tp-ds-title-neutral: #8b9eb3;
  --tp-ds-title-primary-strong: #5318bf;
  --tp-ds-title-primary-subtle: #f4f2ff;

  /* Elements/Body/* */
  --tp-ds-body-default: #3e4854;
  --tp-ds-body-inverse: #ffffff;

  /* Elements/Icon/* */
  --tp-ds-icon-default: #3e4854;
  --tp-ds-icon-inverse: #ffffff;
  --tp-ds-icon-brand-strong: #5318bf;

  /* Elements/Border/* */
  --tp-ds-border-white: #ffffff;
  --tp-ds-border-neutral-subtle: #ced6de;
  --tp-ds-border-neutral-strong: #8b9eb3;
  --tp-ds-border-primary-strong: #5318bf;

  /* Feedback — não definido no Figma (TODO) */
  --tp-ds-feedback-danger: #dc3545;

  /* Fontes — cada peso é uma FAMÍLIA própria (mesmo padrão do fonts.css do Umbraco).
     Escolher o peso pelo token de família; não usar font-weight (evita negrito sintético).
     Para trocar a fonte do site, alterar só estes tokens. */
  --tp-ds-font-fallback: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tp-ds-font-thin: "Tp Sans Thin", var(--tp-ds-font-fallback);
  --tp-ds-font-ultralight: "Tp Sans UltraLight", var(--tp-ds-font-fallback);
  --tp-ds-font-extralight: "Tp Sans ExtraLight", var(--tp-ds-font-fallback);
  --tp-ds-font-light: "Tp Sans Light", var(--tp-ds-font-fallback);
  --tp-ds-font-regular: "Tp Sans Regular", var(--tp-ds-font-fallback);
  --tp-ds-font-medium: "Tp Sans Medium", var(--tp-ds-font-fallback);
  --tp-ds-font-bold: "Tp Sans Bold", var(--tp-ds-font-fallback);

  /* Escala de espaçamento (base 4px) */
  --tp-ds-space-0: 0;
  --tp-ds-space-1: 0.25rem;  /*  4px */
  --tp-ds-space-2: 0.5rem;   /*  8px */
  --tp-ds-space-3: 0.75rem;  /* 12px */
  --tp-ds-space-4: 1rem;     /* 16px */
  --tp-ds-space-5: 1.5rem;   /* 24px */
  --tp-ds-space-6: 2rem;     /* 32px */
  --tp-ds-space-7: 2.5rem;   /* 40px */
  --tp-ds-space-8: 3rem;     /* 48px */
  --tp-ds-space-9: 4rem;     /* 64px */
  --tp-ds-space-10: 5rem;    /* 80px */
  --tp-ds-space-11: 6rem;    /* 96px */
  --tp-ds-space-12: 8rem;    /* 128px */

  /* ======================= SEMÂNTICOS ======================= */

  /* Cores — tema padrão ESCURO (Home de referência). TODO: confirmar com a referência definitiva. */
  --tp-ds-color-bg: var(--tp-ds-bg-black);
  --tp-ds-color-bg-alt: var(--tp-ds-bg-neutral-dark);      /* TODO confirmar uso */
  --tp-ds-color-bg-inverse: var(--tp-ds-bg-default);       /* seções claras */

  --tp-ds-color-text: var(--tp-ds-body-inverse);
  --tp-ds-color-text-muted: var(--tp-ds-title-neutral);
  --tp-ds-color-heading: var(--tp-ds-title-inverse);
  --tp-ds-color-text-inverse: var(--tp-ds-body-default);   /* texto em seções claras */
  --tp-ds-color-heading-inverse: var(--tp-ds-title-default);

  --tp-ds-color-primary: var(--tp-ds-bg-primary-strong);
  --tp-ds-color-primary-hover: var(--tp-ds-bg-secondary-strong);
  --tp-ds-color-primary-subtle: var(--tp-ds-title-primary-subtle);
  --tp-ds-color-on-primary: var(--tp-ds-title-inverse);

  --tp-ds-color-link: var(--tp-ds-title-inverse);
  --tp-ds-color-link-hover: var(--tp-ds-bg-primary-strong);

  --tp-ds-color-border: var(--tp-ds-border-neutral-strong);
  --tp-ds-color-focus: var(--tp-ds-bg-primary-strong);
  --tp-ds-color-danger: var(--tp-ds-feedback-danger);

  /* Tipografia — famílias por função */
  --tp-ds-font-family-base: var(--tp-ds-font-light);        /* textos (Body Light) */
  --tp-ds-font-family-heading: var(--tp-ds-font-extralight); /* títulos (Title ExtraLight) */
  --tp-ds-font-family-number: var(--tp-ds-font-thin);       /* números grandes */
  --tp-ds-font-family-strong: var(--tp-ds-font-bold);       /* destaques (ex.: títulos de coluna do footer) */

  /* Tipografia — tamanhos (mobile; redefinidos nos breakpoints) — TODO Figma */
  --tp-ds-fs-display: 4rem;      /* 64 → 96 (tablet) → 128…180 (desktop) — títulos display (hero, title-display) */
  --tp-ds-fs-h1: 2rem;
  --tp-ds-fs-h2: 1.75rem;
  --tp-ds-fs-h3: 1.5rem;
  --tp-ds-fs-h4: 1.25rem;
  --tp-ds-fs-h5: 1.125rem;
  --tp-ds-fs-h6: 1rem;
  --tp-ds-fs-title-md: 2.5rem;    /* 40 → 48 (tablet) → 56…64 (desktop) — títulos de seção */
  --tp-ds-fs-body-md: 1.125rem;   /* 18 — Figma "Body/Light/md" (botões, links, campos) */
  --tp-ds-lh-body-md: 1.5rem;     /* 24 */
  --tp-ds-lh-body-sm: 1.125rem;   /* 18 — texto 14/18 (ex.: consentimento) */
  --tp-ds-fs-body-lg: 1.5rem;     /* 24 — Figma "Desktop/Body/Light/md" */
  --tp-ds-lh-body-lg: 2rem;       /* 32 */
  --tp-ds-fs-body: 1rem;
  --tp-ds-fs-body-sm: 0.875rem;
  --tp-ds-fs-caption: 0.75rem;

  /* Tipografia — altura de linha */
  --tp-ds-lh-tight: 1.1;
  --tp-ds-lh-heading: 1.2;
  --tp-ds-lh-base: 1.5;
  --tp-ds-lh-loose: 1.7;

  /* Tipografia — espaçamento entre letras */
  --tp-ds-ls-tight: -0.02em;
  --tp-ds-ls-normal: 0;
  --tp-ds-ls-wide: 0.08em;

  /* Layout */
  --tp-ds-container-max: 100%;            /* largura máxima do CONTEÚDO (sem padding) */
  --tp-ds-container-padding: var(--tp-ds-space-4);
  --tp-ds-gutter: var(--tp-ds-space-4);      /* gap de grids próprios (CSS grid/flex) */
  --tp-ds-section-space: var(--tp-ds-space-8);
  --tp-ds-header-height: 5.5rem;          /* 88px — igual em todos os breakpoints */

  /* Header (menu) — cores configuráveis */
  --tp-ds-header-bg: transparent;                         /* no topo da página */
  --tp-ds-header-bg-scrolled: var(--tp-ds-bg-black);      /* após rolar / menu aberto */

  /* Distância da borda da seção até o início do conteúdo.
     Usar em carrosséis full-bleed (padding-inline-start / scroll-padding-inline-start).
     O 100% resolve contra a largura do elemento onde o token é usado. */
  --tp-ds-container-offset: max(
    var(--tp-ds-container-padding),
    calc((100% - var(--tp-ds-container-max)) / 2)
  );

  /* Bordas e raios (Figma: checkbox 3, cards 24, pill 80) */
  --tp-ds-border-width: 1px;
  --tp-ds-radius-sm: 0.1875rem;  /*  3px */
  --tp-ds-radius-md: 0.5rem;     /*  8px — TODO confirmar */
  --tp-ds-radius-lg: 1.5rem;     /* 24px */
  --tp-ds-radius-pill: 5rem;     /* 80px */

  /* Sombras — TODO Figma */
  --tp-ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --tp-ds-shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
  --tp-ds-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);

  /* Camadas (alinhadas à escala do Bootstrap) */
  --tp-ds-z-base: 1;
  --tp-ds-z-dropdown: 1000;
  --tp-ds-z-header: 1030;
  --tp-ds-z-modal: 1055;

  /* Movimento (mesmos valores do design system atual: --t-fast, --t-base, --ease) */
  --tp-ds-duration-fast: 180ms;
  --tp-ds-duration-base: 260ms;
  --tp-ds-duration-slow: 400ms;
  --tp-ds-ease-standard: cubic-bezier(0.41, 0, 0.08, 1);
  --tp-ds-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --tp-ds-ease-reveal: cubic-bezier(0.2, 0.8, 0.2, 1);   /* entradas de texto/asset (hero, title-display, content-block-carousel) */
}

/* ======================= TOKENS RESPONSIVOS ======================= */

/* tablet — Figma 768 */
@media (min-width: 768px) {
  :root {
    --tp-ds-fs-display: 6rem;                                     /* 96 */
    --tp-ds-fs-h1: 2.5rem;
    --tp-ds-fs-h2: 2rem;
    --tp-ds-fs-h3: 1.75rem;
    --tp-ds-fs-title-md: 3rem;                                    /* 48 */

    --tp-ds-container-padding: var(--tp-ds-space-6);
    --tp-ds-gutter: var(--tp-ds-space-5);
    --tp-ds-section-space: var(--tp-ds-space-9);
  }
}

/* desktop — Figma 1440 */
@media (min-width: 1440px) {
  :root {
    --tp-ds-fs-display: clamp(8rem, 10.83vw - 1.75rem, 11.25rem); /* 128 @1440 → 180 @1920 */
    --tp-ds-fs-h1: 3.5rem;
    --tp-ds-fs-h2: 2.5rem;
    --tp-ds-fs-h3: 2rem;
    --tp-ds-fs-h4: 1.5rem;
    --tp-ds-fs-title-md: clamp(3.5rem, 1.667vw + 2rem, 4rem);     /* 56 @1440 → 64 @1920 */

    --tp-ds-container-max: 1200px;        /* TODO Figma */
    --tp-ds-container-padding: var(--tp-ds-space-7);
    --tp-ds-gutter: var(--tp-ds-space-6);
    --tp-ds-section-space: var(--tp-ds-space-11);
  }
}

/* wide — Figma 1990 (acima disso, o conteúdo trava nesta largura) */
@media (min-width: 1990px) {
  :root {
    --tp-ds-fs-h1: 4rem;
    --tp-ds-fs-h2: 3rem;
    --tp-ds-fs-h3: 2.25rem;

    --tp-ds-container-max: 1600px;        /* TODO Figma */
    --tp-ds-section-space: var(--tp-ds-space-12);
  }
}