/* ============================================================
   W10 DS — Utility Attributes (spec 11b)
   Substituição funcional ao Tailwind para spacing, sizing e layout.

   HIERARQUIA: fluid (sem breakpoint) > tablet > desktop
   EXEMPLO:
     <div data-p="md" data-p-desktop="xl">
     <button class="w10-btn w10-btn--solid" data-btn-h="sm" data-btn-h-desktop="lg">

   Valores de spacing: 0 | xs | sm | md | lg | xl | 2xl | 3xl
   Valores de sizing:  sm | md | lg
   ============================================================ */

/* ══════════════════════════════════════════
   SPACING — FLUID (sem breakpoint)
   ══════════════════════════════════════════ */

/* padding */
[data-p="0"]   { padding: 0; }
[data-p="xs"]  { padding: var(--t-spacing-xs); }
[data-p="sm"]  { padding: var(--t-spacing-sm); }
[data-p="md"]  { padding: var(--t-spacing-md); }
[data-p="lg"]  { padding: var(--t-spacing-lg); }
[data-p="xl"]  { padding: var(--t-spacing-xl); }
[data-p="2xl"] { padding: var(--t-spacing-2xl); }
[data-p="3xl"] { padding: var(--t-spacing-3xl); }

/* padding-left + padding-right */
[data-px="0"]   { padding-left: 0; padding-right: 0; }
[data-px="xs"]  { padding-left: var(--t-spacing-xs);  padding-right: var(--t-spacing-xs); }
[data-px="sm"]  { padding-left: var(--t-spacing-sm);  padding-right: var(--t-spacing-sm); }
[data-px="md"]  { padding-left: var(--t-spacing-md);  padding-right: var(--t-spacing-md); }
[data-px="lg"]  { padding-left: var(--t-spacing-lg);  padding-right: var(--t-spacing-lg); }
[data-px="xl"]  { padding-left: var(--t-spacing-xl);  padding-right: var(--t-spacing-xl); }
[data-px="2xl"] { padding-left: var(--t-spacing-2xl); padding-right: var(--t-spacing-2xl); }
[data-px="3xl"] { padding-left: var(--t-spacing-3xl); padding-right: var(--t-spacing-3xl); }

/* padding-top + padding-bottom */
[data-py="0"]   { padding-top: 0; padding-bottom: 0; }
[data-py="xs"]  { padding-top: var(--t-spacing-xs);  padding-bottom: var(--t-spacing-xs); }
[data-py="sm"]  { padding-top: var(--t-spacing-sm);  padding-bottom: var(--t-spacing-sm); }
[data-py="md"]  { padding-top: var(--t-spacing-md);  padding-bottom: var(--t-spacing-md); }
[data-py="lg"]  { padding-top: var(--t-spacing-lg);  padding-bottom: var(--t-spacing-lg); }
[data-py="xl"]  { padding-top: var(--t-spacing-xl);  padding-bottom: var(--t-spacing-xl); }
[data-py="2xl"] { padding-top: var(--t-spacing-2xl); padding-bottom: var(--t-spacing-2xl); }
[data-py="3xl"] { padding-top: var(--t-spacing-3xl); padding-bottom: var(--t-spacing-3xl); }

/* padding-top */
[data-pt="0"]   { padding-top: 0; }
[data-pt="xs"]  { padding-top: var(--t-spacing-xs); }
[data-pt="sm"]  { padding-top: var(--t-spacing-sm); }
[data-pt="md"]  { padding-top: var(--t-spacing-md); }
[data-pt="lg"]  { padding-top: var(--t-spacing-lg); }
[data-pt="xl"]  { padding-top: var(--t-spacing-xl); }
[data-pt="2xl"] { padding-top: var(--t-spacing-2xl); }
[data-pt="3xl"] { padding-top: var(--t-spacing-3xl); }

/* padding-right */
[data-pr="0"]   { padding-right: 0; }
[data-pr="xs"]  { padding-right: var(--t-spacing-xs); }
[data-pr="sm"]  { padding-right: var(--t-spacing-sm); }
[data-pr="md"]  { padding-right: var(--t-spacing-md); }
[data-pr="lg"]  { padding-right: var(--t-spacing-lg); }
[data-pr="xl"]  { padding-right: var(--t-spacing-xl); }
[data-pr="2xl"] { padding-right: var(--t-spacing-2xl); }
[data-pr="3xl"] { padding-right: var(--t-spacing-3xl); }

/* padding-bottom */
[data-pb="0"]   { padding-bottom: 0; }
[data-pb="xs"]  { padding-bottom: var(--t-spacing-xs); }
[data-pb="sm"]  { padding-bottom: var(--t-spacing-sm); }
[data-pb="md"]  { padding-bottom: var(--t-spacing-md); }
[data-pb="lg"]  { padding-bottom: var(--t-spacing-lg); }
[data-pb="xl"]  { padding-bottom: var(--t-spacing-xl); }
[data-pb="2xl"] { padding-bottom: var(--t-spacing-2xl); }
[data-pb="3xl"] { padding-bottom: var(--t-spacing-3xl); }

/* padding-left */
[data-pl="0"]   { padding-left: 0; }
[data-pl="xs"]  { padding-left: var(--t-spacing-xs); }
[data-pl="sm"]  { padding-left: var(--t-spacing-sm); }
[data-pl="md"]  { padding-left: var(--t-spacing-md); }
[data-pl="lg"]  { padding-left: var(--t-spacing-lg); }
[data-pl="xl"]  { padding-left: var(--t-spacing-xl); }
[data-pl="2xl"] { padding-left: var(--t-spacing-2xl); }
[data-pl="3xl"] { padding-left: var(--t-spacing-3xl); }

/* margin */
[data-m="0"]   { margin: 0; }
[data-m="xs"]  { margin: var(--t-spacing-xs); }
[data-m="sm"]  { margin: var(--t-spacing-sm); }
[data-m="md"]  { margin: var(--t-spacing-md); }
[data-m="lg"]  { margin: var(--t-spacing-lg); }
[data-m="xl"]  { margin: var(--t-spacing-xl); }
[data-m="2xl"] { margin: var(--t-spacing-2xl); }
[data-m="3xl"] { margin: var(--t-spacing-3xl); }
[data-m="auto"] { margin: auto; }

/* margin-left + margin-right */
[data-mx="0"]    { margin-left: 0; margin-right: 0; }
[data-mx="xs"]   { margin-left: var(--t-spacing-xs);  margin-right: var(--t-spacing-xs); }
[data-mx="sm"]   { margin-left: var(--t-spacing-sm);  margin-right: var(--t-spacing-sm); }
[data-mx="md"]   { margin-left: var(--t-spacing-md);  margin-right: var(--t-spacing-md); }
[data-mx="lg"]   { margin-left: var(--t-spacing-lg);  margin-right: var(--t-spacing-lg); }
[data-mx="xl"]   { margin-left: var(--t-spacing-xl);  margin-right: var(--t-spacing-xl); }
[data-mx="2xl"]  { margin-left: var(--t-spacing-2xl); margin-right: var(--t-spacing-2xl); }
[data-mx="3xl"]  { margin-left: var(--t-spacing-3xl); margin-right: var(--t-spacing-3xl); }
[data-mx="auto"] { margin-left: auto; margin-right: auto; }

/* margin-top + margin-bottom */
[data-my="0"]   { margin-top: 0; margin-bottom: 0; }
[data-my="xs"]  { margin-top: var(--t-spacing-xs);  margin-bottom: var(--t-spacing-xs); }
[data-my="sm"]  { margin-top: var(--t-spacing-sm);  margin-bottom: var(--t-spacing-sm); }
[data-my="md"]  { margin-top: var(--t-spacing-md);  margin-bottom: var(--t-spacing-md); }
[data-my="lg"]  { margin-top: var(--t-spacing-lg);  margin-bottom: var(--t-spacing-lg); }
[data-my="xl"]  { margin-top: var(--t-spacing-xl);  margin-bottom: var(--t-spacing-xl); }
[data-my="2xl"] { margin-top: var(--t-spacing-2xl); margin-bottom: var(--t-spacing-2xl); }
[data-my="3xl"] { margin-top: var(--t-spacing-3xl); margin-bottom: var(--t-spacing-3xl); }

/* margin-top */
[data-mt="0"]   { margin-top: 0; }
[data-mt="xs"]  { margin-top: var(--t-spacing-xs); }
[data-mt="sm"]  { margin-top: var(--t-spacing-sm); }
[data-mt="md"]  { margin-top: var(--t-spacing-md); }
[data-mt="lg"]  { margin-top: var(--t-spacing-lg); }
[data-mt="xl"]  { margin-top: var(--t-spacing-xl); }
[data-mt="2xl"] { margin-top: var(--t-spacing-2xl); }
[data-mt="3xl"] { margin-top: var(--t-spacing-3xl); }
[data-mt="auto"] { margin-top: auto; }

/* margin-bottom */
[data-mb="0"]   { margin-bottom: 0; }
[data-mb="xs"]  { margin-bottom: var(--t-spacing-xs); }
[data-mb="sm"]  { margin-bottom: var(--t-spacing-sm); }
[data-mb="md"]  { margin-bottom: var(--t-spacing-md); }
[data-mb="lg"]  { margin-bottom: var(--t-spacing-lg); }
[data-mb="xl"]  { margin-bottom: var(--t-spacing-xl); }
[data-mb="2xl"] { margin-bottom: var(--t-spacing-2xl); }
[data-mb="3xl"] { margin-bottom: var(--t-spacing-3xl); }
[data-mb="auto"] { margin-bottom: auto; }

/* margin-right */
[data-mr="0"]    { margin-right: 0; }
[data-mr="xs"]   { margin-right: var(--t-spacing-xs); }
[data-mr="sm"]   { margin-right: var(--t-spacing-sm); }
[data-mr="md"]   { margin-right: var(--t-spacing-md); }
[data-mr="lg"]   { margin-right: var(--t-spacing-lg); }
[data-mr="xl"]   { margin-right: var(--t-spacing-xl); }
[data-mr="2xl"]  { margin-right: var(--t-spacing-2xl); }
[data-mr="3xl"]  { margin-right: var(--t-spacing-3xl); }
[data-mr="auto"] { margin-right: auto; }

/* margin-left */
[data-ml="0"]    { margin-left: 0; }
[data-ml="xs"]   { margin-left: var(--t-spacing-xs); }
[data-ml="sm"]   { margin-left: var(--t-spacing-sm); }
[data-ml="md"]   { margin-left: var(--t-spacing-md); }
[data-ml="lg"]   { margin-left: var(--t-spacing-lg); }
[data-ml="xl"]   { margin-left: var(--t-spacing-xl); }
[data-ml="2xl"]  { margin-left: var(--t-spacing-2xl); }
[data-ml="3xl"]  { margin-left: var(--t-spacing-3xl); }
[data-ml="auto"] { margin-left: auto; }

/* gap */
[data-gap="0"]   { gap: 0; }
[data-gap="xs"]  { gap: var(--t-spacing-xs); }
[data-gap="sm"]  { gap: var(--t-spacing-sm); }
[data-gap="md"]  { gap: var(--t-spacing-md); }
[data-gap="lg"]  { gap: var(--t-spacing-lg); }
[data-gap="xl"]  { gap: var(--t-spacing-xl); }
[data-gap="2xl"] { gap: var(--t-spacing-2xl); }
[data-gap="3xl"] { gap: var(--t-spacing-3xl); }

/* column-gap */
[data-col-gap="0"]   { column-gap: 0; }
[data-col-gap="xs"]  { column-gap: var(--t-spacing-xs); }
[data-col-gap="sm"]  { column-gap: var(--t-spacing-sm); }
[data-col-gap="md"]  { column-gap: var(--t-spacing-md); }
[data-col-gap="lg"]  { column-gap: var(--t-spacing-lg); }
[data-col-gap="xl"]  { column-gap: var(--t-spacing-xl); }
[data-col-gap="2xl"] { column-gap: var(--t-spacing-2xl); }

/* row-gap */
[data-row-gap="0"]   { row-gap: 0; }
[data-row-gap="xs"]  { row-gap: var(--t-spacing-xs); }
[data-row-gap="sm"]  { row-gap: var(--t-spacing-sm); }
[data-row-gap="md"]  { row-gap: var(--t-spacing-md); }
[data-row-gap="lg"]  { row-gap: var(--t-spacing-lg); }
[data-row-gap="xl"]  { row-gap: var(--t-spacing-xl); }
[data-row-gap="2xl"] { row-gap: var(--t-spacing-2xl); }

/* column-gap (data-gap-x) */
[data-gap-x="0"]   { column-gap: 0; }
[data-gap-x="xs"]  { column-gap: var(--t-spacing-xs); }
[data-gap-x="sm"]  { column-gap: var(--t-spacing-sm); }
[data-gap-x="md"]  { column-gap: var(--t-spacing-md); }
[data-gap-x="lg"]  { column-gap: var(--t-spacing-lg); }
[data-gap-x="xl"]  { column-gap: var(--t-spacing-xl); }
[data-gap-x="2xl"] { column-gap: var(--t-spacing-2xl); }
[data-gap-x="3xl"] { column-gap: var(--t-spacing-3xl); }

/* row-gap (data-gap-y) */
[data-gap-y="0"]   { row-gap: 0; }
[data-gap-y="xs"]  { row-gap: var(--t-spacing-xs); }
[data-gap-y="sm"]  { row-gap: var(--t-spacing-sm); }
[data-gap-y="md"]  { row-gap: var(--t-spacing-md); }
[data-gap-y="lg"]  { row-gap: var(--t-spacing-lg); }
[data-gap-y="xl"]  { row-gap: var(--t-spacing-xl); }
[data-gap-y="2xl"] { row-gap: var(--t-spacing-2xl); }
[data-gap-y="3xl"] { row-gap: var(--t-spacing-3xl); }

/* ══════════════════════════════════════════
   COMPONENT SIZING — FLUID
   ══════════════════════════════════════════ */

/* data-btn-h → altura do botão */
[data-btn-h="sm"] { height: var(--t-btn-height-sm); }
[data-btn-h="md"] { height: var(--t-btn-height-md); }
[data-btn-h="lg"] { height: var(--t-btn-height-lg); }

/* data-btn-px → padding horizontal do botão */
[data-btn-px="sm"] { padding-left: var(--t-btn-px-sm); padding-right: var(--t-btn-px-sm); }
[data-btn-px="md"] { padding-left: var(--t-btn-px-md); padding-right: var(--t-btn-px-md); }
[data-btn-px="lg"] { padding-left: var(--t-btn-px-lg); padding-right: var(--t-btn-px-lg); }

/* data-input-h → altura do input */
[data-input-h="sm"] { height: var(--t-input-height-sm); }
[data-input-h="md"] { height: var(--t-input-height-md); }
[data-input-h="lg"] { height: var(--t-input-height-lg); }

/* ══════════════════════════════════════════
   LAYOUT — FLUID
   ══════════════════════════════════════════ */

[data-display="flex"]        { display: flex; }
[data-display="inline-flex"] { display: inline-flex; }
[data-display="grid"]        { display: grid; }
[data-display="block"]       { display: block; }
[data-display="inline"]      { display: inline; }
[data-display="inline-block"]{ display: inline-block; }
[data-display="none"]        { display: none; }
[data-display="hidden"]      { display: none; }

[data-flex-dir="row"]         { flex-direction: row; }
[data-flex-dir="row-reverse"] { flex-direction: row-reverse; }
[data-flex-dir="col"]         { flex-direction: column; }
[data-flex-dir="col-reverse"] { flex-direction: column-reverse; }

[data-align="start"]   { align-items: flex-start; }
[data-align="center"]  { align-items: center; }
[data-align="end"]     { align-items: flex-end; }
[data-align="stretch"] { align-items: stretch; }
[data-align="baseline"]{ align-items: baseline; }

[data-justify="start"]   { justify-content: flex-start; }
[data-justify="center"]  { justify-content: center; }
[data-justify="end"]     { justify-content: flex-end; }
[data-justify="between"] { justify-content: space-between; }
[data-justify="around"]  { justify-content: space-around; }
[data-justify="evenly"]  { justify-content: space-evenly; }

[data-wrap="wrap"]   { flex-wrap: wrap; }
[data-wrap="nowrap"] { flex-wrap: nowrap; }

[data-self="start"]   { align-self: flex-start; }
[data-self="center"]  { align-self: center; }
[data-self="end"]     { align-self: flex-end; }
[data-self="stretch"] { align-self: stretch; }
[data-self="auto"]    { align-self: auto; }

/* ══════════════════════════════════════════
   TABLET — min-width: 768px
   ══════════════════════════════════════════ */

@media (min-width: 768px) {

  /* spacing */
  [data-p-tablet="0"]   { padding: 0; }
  [data-p-tablet="xs"]  { padding: var(--t-spacing-xs); }
  [data-p-tablet="sm"]  { padding: var(--t-spacing-sm); }
  [data-p-tablet="md"]  { padding: var(--t-spacing-md); }
  [data-p-tablet="lg"]  { padding: var(--t-spacing-lg); }
  [data-p-tablet="xl"]  { padding: var(--t-spacing-xl); }
  [data-p-tablet="2xl"] { padding: var(--t-spacing-2xl); }
  [data-p-tablet="3xl"] { padding: var(--t-spacing-3xl); }

  [data-px-tablet="0"]   { padding-left: 0; padding-right: 0; }
  [data-px-tablet="xs"]  { padding-left: var(--t-spacing-xs);  padding-right: var(--t-spacing-xs); }
  [data-px-tablet="sm"]  { padding-left: var(--t-spacing-sm);  padding-right: var(--t-spacing-sm); }
  [data-px-tablet="md"]  { padding-left: var(--t-spacing-md);  padding-right: var(--t-spacing-md); }
  [data-px-tablet="lg"]  { padding-left: var(--t-spacing-lg);  padding-right: var(--t-spacing-lg); }
  [data-px-tablet="xl"]  { padding-left: var(--t-spacing-xl);  padding-right: var(--t-spacing-xl); }
  [data-px-tablet="2xl"] { padding-left: var(--t-spacing-2xl); padding-right: var(--t-spacing-2xl); }

  [data-py-tablet="0"]   { padding-top: 0; padding-bottom: 0; }
  [data-py-tablet="xs"]  { padding-top: var(--t-spacing-xs);  padding-bottom: var(--t-spacing-xs); }
  [data-py-tablet="sm"]  { padding-top: var(--t-spacing-sm);  padding-bottom: var(--t-spacing-sm); }
  [data-py-tablet="md"]  { padding-top: var(--t-spacing-md);  padding-bottom: var(--t-spacing-md); }
  [data-py-tablet="lg"]  { padding-top: var(--t-spacing-lg);  padding-bottom: var(--t-spacing-lg); }
  [data-py-tablet="xl"]  { padding-top: var(--t-spacing-xl);  padding-bottom: var(--t-spacing-xl); }
  [data-py-tablet="2xl"] { padding-top: var(--t-spacing-2xl); padding-bottom: var(--t-spacing-2xl); }
  [data-py-tablet="3xl"] { padding-top: var(--t-spacing-3xl); padding-bottom: var(--t-spacing-3xl); }

  [data-pt-tablet="0"]   { padding-top: 0; }
  [data-pt-tablet="xs"]  { padding-top: var(--t-spacing-xs); }
  [data-pt-tablet="sm"]  { padding-top: var(--t-spacing-sm); }
  [data-pt-tablet="md"]  { padding-top: var(--t-spacing-md); }
  [data-pt-tablet="lg"]  { padding-top: var(--t-spacing-lg); }
  [data-pt-tablet="xl"]  { padding-top: var(--t-spacing-xl); }
  [data-pt-tablet="2xl"] { padding-top: var(--t-spacing-2xl); }
  [data-pt-tablet="3xl"] { padding-top: var(--t-spacing-3xl); }

  [data-pb-tablet="0"]   { padding-bottom: 0; }
  [data-pb-tablet="xs"]  { padding-bottom: var(--t-spacing-xs); }
  [data-pb-tablet="sm"]  { padding-bottom: var(--t-spacing-sm); }
  [data-pb-tablet="md"]  { padding-bottom: var(--t-spacing-md); }
  [data-pb-tablet="lg"]  { padding-bottom: var(--t-spacing-lg); }
  [data-pb-tablet="xl"]  { padding-bottom: var(--t-spacing-xl); }
  [data-pb-tablet="2xl"] { padding-bottom: var(--t-spacing-2xl); }
  [data-pb-tablet="3xl"] { padding-bottom: var(--t-spacing-3xl); }

  [data-pl-tablet="xs"]  { padding-left: var(--t-spacing-xs); }
  [data-pl-tablet="sm"]  { padding-left: var(--t-spacing-sm); }
  [data-pl-tablet="md"]  { padding-left: var(--t-spacing-md); }
  [data-pl-tablet="lg"]  { padding-left: var(--t-spacing-lg); }
  [data-pl-tablet="xl"]  { padding-left: var(--t-spacing-xl); }
  [data-pl-tablet="2xl"] { padding-left: var(--t-spacing-2xl); }
  [data-pl-tablet="3xl"] { padding-left: var(--t-spacing-3xl); }

  [data-pr-tablet="xs"]  { padding-right: var(--t-spacing-xs); }
  [data-pr-tablet="sm"]  { padding-right: var(--t-spacing-sm); }
  [data-pr-tablet="md"]  { padding-right: var(--t-spacing-md); }
  [data-pr-tablet="lg"]  { padding-right: var(--t-spacing-lg); }
  [data-pr-tablet="xl"]  { padding-right: var(--t-spacing-xl); }
  [data-pr-tablet="2xl"] { padding-right: var(--t-spacing-2xl); }
  [data-pr-tablet="3xl"] { padding-right: var(--t-spacing-3xl); }

  [data-mt-tablet="0"]   { margin-top: 0; }
  [data-mt-tablet="xs"]  { margin-top: var(--t-spacing-xs); }
  [data-mt-tablet="sm"]  { margin-top: var(--t-spacing-sm); }
  [data-mt-tablet="md"]  { margin-top: var(--t-spacing-md); }
  [data-mt-tablet="lg"]  { margin-top: var(--t-spacing-lg); }
  [data-mt-tablet="xl"]  { margin-top: var(--t-spacing-xl); }
  [data-mt-tablet="2xl"] { margin-top: var(--t-spacing-2xl); }
  [data-mt-tablet="3xl"] { margin-top: var(--t-spacing-3xl); }

  [data-mb-tablet="0"]   { margin-bottom: 0; }
  [data-mb-tablet="xs"]  { margin-bottom: var(--t-spacing-xs); }
  [data-mb-tablet="sm"]  { margin-bottom: var(--t-spacing-sm); }
  [data-mb-tablet="md"]  { margin-bottom: var(--t-spacing-md); }
  [data-mb-tablet="lg"]  { margin-bottom: var(--t-spacing-lg); }
  [data-mb-tablet="xl"]  { margin-bottom: var(--t-spacing-xl); }
  [data-mb-tablet="2xl"] { margin-bottom: var(--t-spacing-2xl); }
  [data-mb-tablet="3xl"] { margin-bottom: var(--t-spacing-3xl); }

  [data-mx-tablet="0"]    { margin-left: 0; margin-right: 0; }
  [data-mx-tablet="xs"]   { margin-left: var(--t-spacing-xs);  margin-right: var(--t-spacing-xs); }
  [data-mx-tablet="sm"]   { margin-left: var(--t-spacing-sm);  margin-right: var(--t-spacing-sm); }
  [data-mx-tablet="md"]   { margin-left: var(--t-spacing-md);  margin-right: var(--t-spacing-md); }
  [data-mx-tablet="lg"]   { margin-left: var(--t-spacing-lg);  margin-right: var(--t-spacing-lg); }
  [data-mx-tablet="xl"]   { margin-left: var(--t-spacing-xl);  margin-right: var(--t-spacing-xl); }
  [data-mx-tablet="2xl"]  { margin-left: var(--t-spacing-2xl); margin-right: var(--t-spacing-2xl); }
  [data-mx-tablet="3xl"]  { margin-left: var(--t-spacing-3xl); margin-right: var(--t-spacing-3xl); }
  [data-mx-tablet="auto"] { margin-left: auto; margin-right: auto; }

  [data-my-tablet="0"]   { margin-top: 0; margin-bottom: 0; }
  [data-my-tablet="xs"]  { margin-top: var(--t-spacing-xs);  margin-bottom: var(--t-spacing-xs); }
  [data-my-tablet="sm"]  { margin-top: var(--t-spacing-sm);  margin-bottom: var(--t-spacing-sm); }
  [data-my-tablet="md"]  { margin-top: var(--t-spacing-md);  margin-bottom: var(--t-spacing-md); }
  [data-my-tablet="lg"]  { margin-top: var(--t-spacing-lg);  margin-bottom: var(--t-spacing-lg); }
  [data-my-tablet="xl"]  { margin-top: var(--t-spacing-xl);  margin-bottom: var(--t-spacing-xl); }
  [data-my-tablet="2xl"] { margin-top: var(--t-spacing-2xl); margin-bottom: var(--t-spacing-2xl); }
  [data-my-tablet="3xl"] { margin-top: var(--t-spacing-3xl); margin-bottom: var(--t-spacing-3xl); }

  [data-mr-tablet="0"]    { margin-right: 0; }
  [data-mr-tablet="xs"]   { margin-right: var(--t-spacing-xs); }
  [data-mr-tablet="sm"]   { margin-right: var(--t-spacing-sm); }
  [data-mr-tablet="md"]   { margin-right: var(--t-spacing-md); }
  [data-mr-tablet="lg"]   { margin-right: var(--t-spacing-lg); }
  [data-mr-tablet="xl"]   { margin-right: var(--t-spacing-xl); }
  [data-mr-tablet="2xl"]  { margin-right: var(--t-spacing-2xl); }
  [data-mr-tablet="3xl"]  { margin-right: var(--t-spacing-3xl); }
  [data-mr-tablet="auto"] { margin-right: auto; }

  [data-ml-tablet="0"]    { margin-left: 0; }
  [data-ml-tablet="xs"]   { margin-left: var(--t-spacing-xs); }
  [data-ml-tablet="sm"]   { margin-left: var(--t-spacing-sm); }
  [data-ml-tablet="md"]   { margin-left: var(--t-spacing-md); }
  [data-ml-tablet="lg"]   { margin-left: var(--t-spacing-lg); }
  [data-ml-tablet="xl"]   { margin-left: var(--t-spacing-xl); }
  [data-ml-tablet="2xl"]  { margin-left: var(--t-spacing-2xl); }
  [data-ml-tablet="3xl"]  { margin-left: var(--t-spacing-3xl); }
  [data-ml-tablet="auto"] { margin-left: auto; }

  [data-gap-tablet="0"]   { gap: 0; }
  [data-gap-tablet="xs"]  { gap: var(--t-spacing-xs); }
  [data-gap-tablet="sm"]  { gap: var(--t-spacing-sm); }
  [data-gap-tablet="md"]  { gap: var(--t-spacing-md); }
  [data-gap-tablet="lg"]  { gap: var(--t-spacing-lg); }
  [data-gap-tablet="xl"]  { gap: var(--t-spacing-xl); }
  [data-gap-tablet="2xl"] { gap: var(--t-spacing-2xl); }
  [data-gap-tablet="3xl"] { gap: var(--t-spacing-3xl); }

  [data-col-gap-tablet="xs"]  { column-gap: var(--t-spacing-xs); }
  [data-col-gap-tablet="sm"]  { column-gap: var(--t-spacing-sm); }
  [data-col-gap-tablet="md"]  { column-gap: var(--t-spacing-md); }
  [data-col-gap-tablet="lg"]  { column-gap: var(--t-spacing-lg); }
  [data-col-gap-tablet="xl"]  { column-gap: var(--t-spacing-xl); }

  [data-row-gap-tablet="xs"]  { row-gap: var(--t-spacing-xs); }
  [data-row-gap-tablet="sm"]  { row-gap: var(--t-spacing-sm); }
  [data-row-gap-tablet="md"]  { row-gap: var(--t-spacing-md); }
  [data-row-gap-tablet="lg"]  { row-gap: var(--t-spacing-lg); }
  [data-row-gap-tablet="xl"]  { row-gap: var(--t-spacing-xl); }

  [data-gap-x-tablet="0"]   { column-gap: 0; }
  [data-gap-x-tablet="xs"]  { column-gap: var(--t-spacing-xs); }
  [data-gap-x-tablet="sm"]  { column-gap: var(--t-spacing-sm); }
  [data-gap-x-tablet="md"]  { column-gap: var(--t-spacing-md); }
  [data-gap-x-tablet="lg"]  { column-gap: var(--t-spacing-lg); }
  [data-gap-x-tablet="xl"]  { column-gap: var(--t-spacing-xl); }
  [data-gap-x-tablet="2xl"] { column-gap: var(--t-spacing-2xl); }
  [data-gap-x-tablet="3xl"] { column-gap: var(--t-spacing-3xl); }

  [data-gap-y-tablet="0"]   { row-gap: 0; }
  [data-gap-y-tablet="xs"]  { row-gap: var(--t-spacing-xs); }
  [data-gap-y-tablet="sm"]  { row-gap: var(--t-spacing-sm); }
  [data-gap-y-tablet="md"]  { row-gap: var(--t-spacing-md); }
  [data-gap-y-tablet="lg"]  { row-gap: var(--t-spacing-lg); }
  [data-gap-y-tablet="xl"]  { row-gap: var(--t-spacing-xl); }
  [data-gap-y-tablet="2xl"] { row-gap: var(--t-spacing-2xl); }
  [data-gap-y-tablet="3xl"] { row-gap: var(--t-spacing-3xl); }

  /* component sizing */
  [data-btn-h-tablet="sm"] { height: var(--t-btn-height-sm); }
  [data-btn-h-tablet="md"] { height: var(--t-btn-height-md); }
  [data-btn-h-tablet="lg"] { height: var(--t-btn-height-lg); }

  [data-btn-px-tablet="sm"] { padding-left: var(--t-btn-px-sm); padding-right: var(--t-btn-px-sm); }
  [data-btn-px-tablet="md"] { padding-left: var(--t-btn-px-md); padding-right: var(--t-btn-px-md); }
  [data-btn-px-tablet="lg"] { padding-left: var(--t-btn-px-lg); padding-right: var(--t-btn-px-lg); }

  [data-input-h-tablet="sm"] { height: var(--t-input-height-sm); }
  [data-input-h-tablet="md"] { height: var(--t-input-height-md); }
  [data-input-h-tablet="lg"] { height: var(--t-input-height-lg); }

  /* layout */
  [data-display-tablet="flex"]        { display: flex; }
  [data-display-tablet="inline-flex"] { display: inline-flex; }
  [data-display-tablet="grid"]        { display: grid; }
  [data-display-tablet="block"]       { display: block; }
  [data-display-tablet="inline"]      { display: inline; }
  [data-display-tablet="inline-block"]{ display: inline-block; }
  [data-display-tablet="none"]        { display: none; }
  [data-display-tablet="hidden"]      { display: none; }

  [data-flex-dir-tablet="row"]         { flex-direction: row; }
  [data-flex-dir-tablet="col"]         { flex-direction: column; }
  [data-flex-dir-tablet="row-reverse"] { flex-direction: row-reverse; }
  [data-flex-dir-tablet="col-reverse"] { flex-direction: column-reverse; }

  [data-align-tablet="start"]   { align-items: flex-start; }
  [data-align-tablet="center"]  { align-items: center; }
  [data-align-tablet="end"]     { align-items: flex-end; }
  [data-align-tablet="stretch"] { align-items: stretch; }

  [data-justify-tablet="start"]   { justify-content: flex-start; }
  [data-justify-tablet="center"]  { justify-content: center; }
  [data-justify-tablet="end"]     { justify-content: flex-end; }
  [data-justify-tablet="between"] { justify-content: space-between; }
  [data-justify-tablet="around"]  { justify-content: space-around; }
  [data-justify-tablet="evenly"]  { justify-content: space-evenly; }

  [data-wrap-tablet="wrap"]   { flex-wrap: wrap; }
  [data-wrap-tablet="nowrap"] { flex-wrap: nowrap; }
}

/* ══════════════════════════════════════════
   DESKTOP — min-width: 1024px
   ══════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* spacing */
  [data-p-desktop="0"]   { padding: 0; }
  [data-p-desktop="xs"]  { padding: var(--t-spacing-xs); }
  [data-p-desktop="sm"]  { padding: var(--t-spacing-sm); }
  [data-p-desktop="md"]  { padding: var(--t-spacing-md); }
  [data-p-desktop="lg"]  { padding: var(--t-spacing-lg); }
  [data-p-desktop="xl"]  { padding: var(--t-spacing-xl); }
  [data-p-desktop="2xl"] { padding: var(--t-spacing-2xl); }
  [data-p-desktop="3xl"] { padding: var(--t-spacing-3xl); }

  [data-px-desktop="0"]   { padding-left: 0; padding-right: 0; }
  [data-px-desktop="xs"]  { padding-left: var(--t-spacing-xs);  padding-right: var(--t-spacing-xs); }
  [data-px-desktop="sm"]  { padding-left: var(--t-spacing-sm);  padding-right: var(--t-spacing-sm); }
  [data-px-desktop="md"]  { padding-left: var(--t-spacing-md);  padding-right: var(--t-spacing-md); }
  [data-px-desktop="lg"]  { padding-left: var(--t-spacing-lg);  padding-right: var(--t-spacing-lg); }
  [data-px-desktop="xl"]  { padding-left: var(--t-spacing-xl);  padding-right: var(--t-spacing-xl); }
  [data-px-desktop="2xl"] { padding-left: var(--t-spacing-2xl); padding-right: var(--t-spacing-2xl); }
  [data-px-desktop="3xl"] { padding-left: var(--t-spacing-3xl); padding-right: var(--t-spacing-3xl); }

  [data-py-desktop="0"]   { padding-top: 0; padding-bottom: 0; }
  [data-py-desktop="xs"]  { padding-top: var(--t-spacing-xs);  padding-bottom: var(--t-spacing-xs); }
  [data-py-desktop="sm"]  { padding-top: var(--t-spacing-sm);  padding-bottom: var(--t-spacing-sm); }
  [data-py-desktop="md"]  { padding-top: var(--t-spacing-md);  padding-bottom: var(--t-spacing-md); }
  [data-py-desktop="lg"]  { padding-top: var(--t-spacing-lg);  padding-bottom: var(--t-spacing-lg); }
  [data-py-desktop="xl"]  { padding-top: var(--t-spacing-xl);  padding-bottom: var(--t-spacing-xl); }
  [data-py-desktop="2xl"] { padding-top: var(--t-spacing-2xl); padding-bottom: var(--t-spacing-2xl); }
  [data-py-desktop="3xl"] { padding-top: var(--t-spacing-3xl); padding-bottom: var(--t-spacing-3xl); }

  [data-pt-desktop="0"]   { padding-top: 0; }
  [data-pt-desktop="xs"]  { padding-top: var(--t-spacing-xs); }
  [data-pt-desktop="sm"]  { padding-top: var(--t-spacing-sm); }
  [data-pt-desktop="md"]  { padding-top: var(--t-spacing-md); }
  [data-pt-desktop="lg"]  { padding-top: var(--t-spacing-lg); }
  [data-pt-desktop="xl"]  { padding-top: var(--t-spacing-xl); }
  [data-pt-desktop="2xl"] { padding-top: var(--t-spacing-2xl); }
  [data-pt-desktop="3xl"] { padding-top: var(--t-spacing-3xl); }

  [data-pb-desktop="0"]   { padding-bottom: 0; }
  [data-pb-desktop="xs"]  { padding-bottom: var(--t-spacing-xs); }
  [data-pb-desktop="sm"]  { padding-bottom: var(--t-spacing-sm); }
  [data-pb-desktop="md"]  { padding-bottom: var(--t-spacing-md); }
  [data-pb-desktop="lg"]  { padding-bottom: var(--t-spacing-lg); }
  [data-pb-desktop="xl"]  { padding-bottom: var(--t-spacing-xl); }
  [data-pb-desktop="2xl"] { padding-bottom: var(--t-spacing-2xl); }
  [data-pb-desktop="3xl"] { padding-bottom: var(--t-spacing-3xl); }

  [data-pl-desktop="xs"]  { padding-left: var(--t-spacing-xs); }
  [data-pl-desktop="sm"]  { padding-left: var(--t-spacing-sm); }
  [data-pl-desktop="md"]  { padding-left: var(--t-spacing-md); }
  [data-pl-desktop="lg"]  { padding-left: var(--t-spacing-lg); }
  [data-pl-desktop="xl"]  { padding-left: var(--t-spacing-xl); }
  [data-pl-desktop="2xl"] { padding-left: var(--t-spacing-2xl); }
  [data-pl-desktop="3xl"] { padding-left: var(--t-spacing-3xl); }

  [data-pr-desktop="xs"]  { padding-right: var(--t-spacing-xs); }
  [data-pr-desktop="sm"]  { padding-right: var(--t-spacing-sm); }
  [data-pr-desktop="md"]  { padding-right: var(--t-spacing-md); }
  [data-pr-desktop="lg"]  { padding-right: var(--t-spacing-lg); }
  [data-pr-desktop="xl"]  { padding-right: var(--t-spacing-xl); }
  [data-pr-desktop="2xl"] { padding-right: var(--t-spacing-2xl); }
  [data-pr-desktop="3xl"] { padding-right: var(--t-spacing-3xl); }

  [data-mt-desktop="0"]   { margin-top: 0; }
  [data-mt-desktop="xs"]  { margin-top: var(--t-spacing-xs); }
  [data-mt-desktop="sm"]  { margin-top: var(--t-spacing-sm); }
  [data-mt-desktop="md"]  { margin-top: var(--t-spacing-md); }
  [data-mt-desktop="lg"]  { margin-top: var(--t-spacing-lg); }
  [data-mt-desktop="xl"]  { margin-top: var(--t-spacing-xl); }
  [data-mt-desktop="2xl"] { margin-top: var(--t-spacing-2xl); }
  [data-mt-desktop="3xl"] { margin-top: var(--t-spacing-3xl); }
  [data-mt-desktop="auto"]{ margin-top: auto; }

  [data-mb-desktop="0"]   { margin-bottom: 0; }
  [data-mb-desktop="xs"]  { margin-bottom: var(--t-spacing-xs); }
  [data-mb-desktop="sm"]  { margin-bottom: var(--t-spacing-sm); }
  [data-mb-desktop="md"]  { margin-bottom: var(--t-spacing-md); }
  [data-mb-desktop="lg"]  { margin-bottom: var(--t-spacing-lg); }
  [data-mb-desktop="xl"]  { margin-bottom: var(--t-spacing-xl); }
  [data-mb-desktop="2xl"] { margin-bottom: var(--t-spacing-2xl); }
  [data-mb-desktop="3xl"] { margin-bottom: var(--t-spacing-3xl); }

  [data-mx-desktop="0"]    { margin-left: 0; margin-right: 0; }
  [data-mx-desktop="xs"]   { margin-left: var(--t-spacing-xs);  margin-right: var(--t-spacing-xs); }
  [data-mx-desktop="sm"]   { margin-left: var(--t-spacing-sm);  margin-right: var(--t-spacing-sm); }
  [data-mx-desktop="md"]   { margin-left: var(--t-spacing-md);  margin-right: var(--t-spacing-md); }
  [data-mx-desktop="lg"]   { margin-left: var(--t-spacing-lg);  margin-right: var(--t-spacing-lg); }
  [data-mx-desktop="xl"]   { margin-left: var(--t-spacing-xl);  margin-right: var(--t-spacing-xl); }
  [data-mx-desktop="2xl"]  { margin-left: var(--t-spacing-2xl); margin-right: var(--t-spacing-2xl); }
  [data-mx-desktop="3xl"]  { margin-left: var(--t-spacing-3xl); margin-right: var(--t-spacing-3xl); }
  [data-mx-desktop="auto"] { margin-left: auto; margin-right: auto; }

  [data-my-desktop="0"]   { margin-top: 0; margin-bottom: 0; }
  [data-my-desktop="xs"]  { margin-top: var(--t-spacing-xs);  margin-bottom: var(--t-spacing-xs); }
  [data-my-desktop="sm"]  { margin-top: var(--t-spacing-sm);  margin-bottom: var(--t-spacing-sm); }
  [data-my-desktop="md"]  { margin-top: var(--t-spacing-md);  margin-bottom: var(--t-spacing-md); }
  [data-my-desktop="lg"]  { margin-top: var(--t-spacing-lg);  margin-bottom: var(--t-spacing-lg); }
  [data-my-desktop="xl"]  { margin-top: var(--t-spacing-xl);  margin-bottom: var(--t-spacing-xl); }
  [data-my-desktop="2xl"] { margin-top: var(--t-spacing-2xl); margin-bottom: var(--t-spacing-2xl); }
  [data-my-desktop="3xl"] { margin-top: var(--t-spacing-3xl); margin-bottom: var(--t-spacing-3xl); }

  [data-mr-desktop="0"]    { margin-right: 0; }
  [data-mr-desktop="xs"]   { margin-right: var(--t-spacing-xs); }
  [data-mr-desktop="sm"]   { margin-right: var(--t-spacing-sm); }
  [data-mr-desktop="md"]   { margin-right: var(--t-spacing-md); }
  [data-mr-desktop="lg"]   { margin-right: var(--t-spacing-lg); }
  [data-mr-desktop="xl"]   { margin-right: var(--t-spacing-xl); }
  [data-mr-desktop="2xl"]  { margin-right: var(--t-spacing-2xl); }
  [data-mr-desktop="3xl"]  { margin-right: var(--t-spacing-3xl); }
  [data-mr-desktop="auto"] { margin-right: auto; }

  [data-ml-desktop="0"]    { margin-left: 0; }
  [data-ml-desktop="xs"]   { margin-left: var(--t-spacing-xs); }
  [data-ml-desktop="sm"]   { margin-left: var(--t-spacing-sm); }
  [data-ml-desktop="md"]   { margin-left: var(--t-spacing-md); }
  [data-ml-desktop="lg"]   { margin-left: var(--t-spacing-lg); }
  [data-ml-desktop="xl"]   { margin-left: var(--t-spacing-xl); }
  [data-ml-desktop="2xl"]  { margin-left: var(--t-spacing-2xl); }
  [data-ml-desktop="3xl"]  { margin-left: var(--t-spacing-3xl); }
  [data-ml-desktop="auto"] { margin-left: auto; }

  [data-gap-desktop="0"]   { gap: 0; }
  [data-gap-desktop="xs"]  { gap: var(--t-spacing-xs); }
  [data-gap-desktop="sm"]  { gap: var(--t-spacing-sm); }
  [data-gap-desktop="md"]  { gap: var(--t-spacing-md); }
  [data-gap-desktop="lg"]  { gap: var(--t-spacing-lg); }
  [data-gap-desktop="xl"]  { gap: var(--t-spacing-xl); }
  [data-gap-desktop="2xl"] { gap: var(--t-spacing-2xl); }
  [data-gap-desktop="3xl"] { gap: var(--t-spacing-3xl); }

  [data-col-gap-desktop="xs"]  { column-gap: var(--t-spacing-xs); }
  [data-col-gap-desktop="sm"]  { column-gap: var(--t-spacing-sm); }
  [data-col-gap-desktop="md"]  { column-gap: var(--t-spacing-md); }
  [data-col-gap-desktop="lg"]  { column-gap: var(--t-spacing-lg); }
  [data-col-gap-desktop="xl"]  { column-gap: var(--t-spacing-xl); }
  [data-col-gap-desktop="2xl"] { column-gap: var(--t-spacing-2xl); }

  [data-row-gap-desktop="xs"]  { row-gap: var(--t-spacing-xs); }
  [data-row-gap-desktop="sm"]  { row-gap: var(--t-spacing-sm); }
  [data-row-gap-desktop="md"]  { row-gap: var(--t-spacing-md); }
  [data-row-gap-desktop="lg"]  { row-gap: var(--t-spacing-lg); }
  [data-row-gap-desktop="xl"]  { row-gap: var(--t-spacing-xl); }
  [data-row-gap-desktop="2xl"] { row-gap: var(--t-spacing-2xl); }

  [data-gap-x-desktop="0"]   { column-gap: 0; }
  [data-gap-x-desktop="xs"]  { column-gap: var(--t-spacing-xs); }
  [data-gap-x-desktop="sm"]  { column-gap: var(--t-spacing-sm); }
  [data-gap-x-desktop="md"]  { column-gap: var(--t-spacing-md); }
  [data-gap-x-desktop="lg"]  { column-gap: var(--t-spacing-lg); }
  [data-gap-x-desktop="xl"]  { column-gap: var(--t-spacing-xl); }
  [data-gap-x-desktop="2xl"] { column-gap: var(--t-spacing-2xl); }
  [data-gap-x-desktop="3xl"] { column-gap: var(--t-spacing-3xl); }

  [data-gap-y-desktop="0"]   { row-gap: 0; }
  [data-gap-y-desktop="xs"]  { row-gap: var(--t-spacing-xs); }
  [data-gap-y-desktop="sm"]  { row-gap: var(--t-spacing-sm); }
  [data-gap-y-desktop="md"]  { row-gap: var(--t-spacing-md); }
  [data-gap-y-desktop="lg"]  { row-gap: var(--t-spacing-lg); }
  [data-gap-y-desktop="xl"]  { row-gap: var(--t-spacing-xl); }
  [data-gap-y-desktop="2xl"] { row-gap: var(--t-spacing-2xl); }
  [data-gap-y-desktop="3xl"] { row-gap: var(--t-spacing-3xl); }

  /* component sizing */
  [data-btn-h-desktop="sm"] { height: var(--t-btn-height-sm); }
  [data-btn-h-desktop="md"] { height: var(--t-btn-height-md); }
  [data-btn-h-desktop="lg"] { height: var(--t-btn-height-lg); }

  [data-btn-px-desktop="sm"] { padding-left: var(--t-btn-px-sm); padding-right: var(--t-btn-px-sm); }
  [data-btn-px-desktop="md"] { padding-left: var(--t-btn-px-md); padding-right: var(--t-btn-px-md); }
  [data-btn-px-desktop="lg"] { padding-left: var(--t-btn-px-lg); padding-right: var(--t-btn-px-lg); }

  [data-input-h-desktop="sm"] { height: var(--t-input-height-sm); }
  [data-input-h-desktop="md"] { height: var(--t-input-height-md); }
  [data-input-h-desktop="lg"] { height: var(--t-input-height-lg); }

  /* layout */
  [data-display-desktop="flex"]        { display: flex; }
  [data-display-desktop="inline-flex"] { display: inline-flex; }
  [data-display-desktop="grid"]        { display: grid; }
  [data-display-desktop="block"]       { display: block; }
  [data-display-desktop="inline"]      { display: inline; }
  [data-display-desktop="inline-block"]{ display: inline-block; }
  [data-display-desktop="none"]        { display: none; }
  [data-display-desktop="hidden"]      { display: none; }

  [data-flex-dir-desktop="row"]         { flex-direction: row; }
  [data-flex-dir-desktop="col"]         { flex-direction: column; }
  [data-flex-dir-desktop="row-reverse"] { flex-direction: row-reverse; }
  [data-flex-dir-desktop="col-reverse"] { flex-direction: column-reverse; }

  [data-align-desktop="start"]   { align-items: flex-start; }
  [data-align-desktop="center"]  { align-items: center; }
  [data-align-desktop="end"]     { align-items: flex-end; }
  [data-align-desktop="stretch"] { align-items: stretch; }

  [data-justify-desktop="start"]   { justify-content: flex-start; }
  [data-justify-desktop="center"]  { justify-content: center; }
  [data-justify-desktop="end"]     { justify-content: flex-end; }
  [data-justify-desktop="between"] { justify-content: space-between; }
  [data-justify-desktop="around"]  { justify-content: space-around; }
  [data-justify-desktop="evenly"]  { justify-content: space-evenly; }

  [data-wrap-desktop="wrap"]   { flex-wrap: wrap; }
  [data-wrap-desktop="nowrap"] { flex-wrap: nowrap; }
}

/* ══════════════════════════════════════════
   GRID COLUMNS — FLUID (sem breakpoint)
   ══════════════════════════════════════════ */

/* data-cols → grid-template-columns no container */
[data-cols="1"]  { grid-template-columns: repeat(1,  1fr); }
[data-cols="2"]  { grid-template-columns: repeat(2,  1fr); }
[data-cols="3"]  { grid-template-columns: repeat(3,  1fr); }
[data-cols="4"]  { grid-template-columns: repeat(4,  1fr); }
[data-cols="5"]  { grid-template-columns: repeat(5,  1fr); }
[data-cols="6"]  { grid-template-columns: repeat(6,  1fr); }
[data-cols="7"]  { grid-template-columns: repeat(7,  1fr); }
[data-cols="8"]  { grid-template-columns: repeat(8,  1fr); }
[data-cols="9"]  { grid-template-columns: repeat(9,  1fr); }
[data-cols="10"] { grid-template-columns: repeat(10, 1fr); }
[data-cols="11"] { grid-template-columns: repeat(11, 1fr); }
[data-cols="12"] { grid-template-columns: repeat(12, 1fr); }

/* data-span → grid-column: span N no filho */
[data-span="1"]  { grid-column: span 1; }
[data-span="2"]  { grid-column: span 2; }
[data-span="3"]  { grid-column: span 3; }
[data-span="4"]  { grid-column: span 4; }
[data-span="5"]  { grid-column: span 5; }
[data-span="6"]  { grid-column: span 6; }
[data-span="7"]  { grid-column: span 7; }
[data-span="8"]  { grid-column: span 8; }
[data-span="9"]  { grid-column: span 9; }
[data-span="10"] { grid-column: span 10; }
[data-span="11"] { grid-column: span 11; }
[data-span="12"] { grid-column: span 12; }

/* ══════════════════════════════════════════
   GRID COLUMNS — TABLET (min-width: 768px)
   ══════════════════════════════════════════ */

@media (min-width: 768px) {
  [data-cols-tablet="1"]  { grid-template-columns: repeat(1,  1fr); }
  [data-cols-tablet="2"]  { grid-template-columns: repeat(2,  1fr); }
  [data-cols-tablet="3"]  { grid-template-columns: repeat(3,  1fr); }
  [data-cols-tablet="4"]  { grid-template-columns: repeat(4,  1fr); }
  [data-cols-tablet="5"]  { grid-template-columns: repeat(5,  1fr); }
  [data-cols-tablet="6"]  { grid-template-columns: repeat(6,  1fr); }
  [data-cols-tablet="7"]  { grid-template-columns: repeat(7,  1fr); }
  [data-cols-tablet="8"]  { grid-template-columns: repeat(8,  1fr); }
  [data-cols-tablet="9"]  { grid-template-columns: repeat(9,  1fr); }
  [data-cols-tablet="10"] { grid-template-columns: repeat(10, 1fr); }
  [data-cols-tablet="11"] { grid-template-columns: repeat(11, 1fr); }
  [data-cols-tablet="12"] { grid-template-columns: repeat(12, 1fr); }

  [data-span-tablet="1"]  { grid-column: span 1; }
  [data-span-tablet="2"]  { grid-column: span 2; }
  [data-span-tablet="3"]  { grid-column: span 3; }
  [data-span-tablet="4"]  { grid-column: span 4; }
  [data-span-tablet="5"]  { grid-column: span 5; }
  [data-span-tablet="6"]  { grid-column: span 6; }
  [data-span-tablet="7"]  { grid-column: span 7; }
  [data-span-tablet="8"]  { grid-column: span 8; }
  [data-span-tablet="9"]  { grid-column: span 9; }
  [data-span-tablet="10"] { grid-column: span 10; }
  [data-span-tablet="11"] { grid-column: span 11; }
  [data-span-tablet="12"] { grid-column: span 12; }
}

/* ══════════════════════════════════════════
   GRID COLUMNS — DESKTOP (min-width: 1024px)
   ══════════════════════════════════════════ */

@media (min-width: 1024px) {
  [data-cols-desktop="1"]  { grid-template-columns: repeat(1,  1fr); }
  [data-cols-desktop="2"]  { grid-template-columns: repeat(2,  1fr); }
  [data-cols-desktop="3"]  { grid-template-columns: repeat(3,  1fr); }
  [data-cols-desktop="4"]  { grid-template-columns: repeat(4,  1fr); }
  [data-cols-desktop="5"]  { grid-template-columns: repeat(5,  1fr); }
  [data-cols-desktop="6"]  { grid-template-columns: repeat(6,  1fr); }
  [data-cols-desktop="7"]  { grid-template-columns: repeat(7,  1fr); }
  [data-cols-desktop="8"]  { grid-template-columns: repeat(8,  1fr); }
  [data-cols-desktop="9"]  { grid-template-columns: repeat(9,  1fr); }
  [data-cols-desktop="10"] { grid-template-columns: repeat(10, 1fr); }
  [data-cols-desktop="11"] { grid-template-columns: repeat(11, 1fr); }
  [data-cols-desktop="12"] { grid-template-columns: repeat(12, 1fr); }

  [data-span-desktop="1"]  { grid-column: span 1; }
  [data-span-desktop="2"]  { grid-column: span 2; }
  [data-span-desktop="3"]  { grid-column: span 3; }
  [data-span-desktop="4"]  { grid-column: span 4; }
  [data-span-desktop="5"]  { grid-column: span 5; }
  [data-span-desktop="6"]  { grid-column: span 6; }
  [data-span-desktop="7"]  { grid-column: span 7; }
  [data-span-desktop="8"]  { grid-column: span 8; }
  [data-span-desktop="9"]  { grid-column: span 9; }
  [data-span-desktop="10"] { grid-column: span 10; }
  [data-span-desktop="11"] { grid-column: span 11; }
  [data-span-desktop="12"] { grid-column: span 12; }
}

/* ══════════════════════════════════════════
   SIZING — WIDTH (spec 22)
   Escape hatch: data-w="custom" style="--w10-w: 320px"
   ══════════════════════════════════════════ */

[data-w="full"]   { width: 100%; }
[data-w="auto"]   { width: auto; }
[data-w="custom"] { width: var(--w10-w); }

/* ── max-width ── */
[data-max-w="sm"]      { max-width: 480px; }
[data-max-w="md"]      { max-width: 640px; }
[data-max-w="lg"]      { max-width: 768px; }
[data-max-w="xl"]      { max-width: 1024px; }
[data-max-w="2xl"]     { max-width: 1280px; }
[data-max-w="content"] { max-width: 72rem; }
[data-max-w="full"]    { max-width: 100%; }
[data-max-w="none"]    { max-width: none; }
[data-max-w="custom"]  { max-width: var(--w10-max-w); }

/* ── min-width ── */
[data-min-w="0"]      { min-width: 0; }
[data-min-w="sm"]     { min-width: 480px; }
[data-min-w="md"]     { min-width: 640px; }
[data-min-w="full"]   { min-width: 100%; }
[data-min-w="custom"] { min-width: var(--w10-min-w); }

/* ══════════════════════════════════════════
   SIZING — HEIGHT (spec 22)
   ══════════════════════════════════════════ */

[data-h="auto"]   { height: auto; }
[data-h="full"]   { height: 100%; }
[data-h="screen"] { height: 100dvh; }
[data-h="custom"] { height: var(--w10-h); }

[data-min-h="0"]      { min-height: 0; }
[data-min-h="screen"] { min-height: 100dvh; }
[data-min-h="custom"] { min-height: var(--w10-min-h); }

/* ══════════════════════════════════════════
   OVERFLOW (spec 22)
   ══════════════════════════════════════════ */

[data-overflow="hidden"]  { overflow: hidden; }
[data-overflow="auto"]    { overflow: auto; }
[data-overflow="scroll"]  { overflow: scroll; }
[data-overflow="visible"] { overflow: visible; }
[data-overflow-x="hidden"]  { overflow-x: hidden; }
[data-overflow-x="auto"]    { overflow-x: auto; }
[data-overflow-y="hidden"]  { overflow-y: hidden; }
[data-overflow-y="auto"]    { overflow-y: auto; }

/* ══════════════════════════════════════════
   POSITION (spec 22)
   ══════════════════════════════════════════ */

[data-pos="relative"] { position: relative; }
[data-pos="absolute"] { position: absolute; }
[data-pos="fixed"]    { position: fixed; }
[data-pos="sticky"]   { position: sticky; top: 0; }
[data-pos="static"]   { position: static; }

/* ══════════════════════════════════════════
   Z-INDEX (spec 22)
   ══════════════════════════════════════════ */

[data-z="0"]    { z-index: 0; }
[data-z="1"]    { z-index: 1; }
[data-z="2"]    { z-index: 2; }
[data-z="10"]   { z-index: 10; }
[data-z="20"]   { z-index: 20; }
[data-z="50"]   { z-index: 50; }
[data-z="100"]  { z-index: 100; }
[data-z="auto"] { z-index: auto; }

/* ══════════════════════════════════════════
   SIZING — RESPONSIVE VARIANTS (spec 22)
   ══════════════════════════════════════════ */

@media (min-width: 768px) {
  [data-w-tablet="full"]   { width: 100%; }
  [data-w-tablet="auto"]   { width: auto; }
  [data-w-tablet="custom"] { width: var(--w10-w-tablet, var(--w10-w)); }

  [data-max-w-tablet="sm"]      { max-width: 480px; }
  [data-max-w-tablet="md"]      { max-width: 640px; }
  [data-max-w-tablet="lg"]      { max-width: 768px; }
  [data-max-w-tablet="xl"]      { max-width: 1024px; }
  [data-max-w-tablet="2xl"]     { max-width: 1280px; }
  [data-max-w-tablet="content"] { max-width: 72rem; }
  [data-max-w-tablet="full"]    { max-width: 100%; }
  [data-max-w-tablet="none"]    { max-width: none; }
  [data-max-w-tablet="custom"]  { max-width: var(--w10-max-w-tablet, var(--w10-max-w)); }

  [data-h-tablet="auto"]   { height: auto; }
  [data-h-tablet="full"]   { height: 100%; }
  [data-h-tablet="screen"] { height: 100dvh; }
  [data-h-tablet="custom"] { height: var(--w10-h-tablet, var(--w10-h)); }

  [data-pos-tablet="relative"] { position: relative; }
  [data-pos-tablet="absolute"] { position: absolute; }
  [data-pos-tablet="fixed"]    { position: fixed; }
  [data-pos-tablet="sticky"]   { position: sticky; top: 0; }
  [data-pos-tablet="static"]   { position: static; }
}

@media (min-width: 1024px) {
  [data-w-desktop="full"]   { width: 100%; }
  [data-w-desktop="auto"]   { width: auto; }
  [data-w-desktop="custom"] { width: var(--w10-w-desktop, var(--w10-w)); }

  [data-max-w-desktop="sm"]      { max-width: 480px; }
  [data-max-w-desktop="md"]      { max-width: 640px; }
  [data-max-w-desktop="lg"]      { max-width: 768px; }
  [data-max-w-desktop="xl"]      { max-width: 1024px; }
  [data-max-w-desktop="2xl"]     { max-width: 1280px; }
  [data-max-w-desktop="content"] { max-width: 72rem; }
  [data-max-w-desktop="full"]    { max-width: 100%; }
  [data-max-w-desktop="none"]    { max-width: none; }
  [data-max-w-desktop="custom"]  { max-width: var(--w10-max-w-desktop, var(--w10-max-w)); }

  [data-h-desktop="auto"]   { height: auto; }
  [data-h-desktop="full"]   { height: 100%; }
  [data-h-desktop="screen"] { height: 100dvh; }
  [data-h-desktop="custom"] { height: var(--w10-h-desktop, var(--w10-h)); }

  [data-pos-desktop="relative"] { position: relative; }
  [data-pos-desktop="absolute"] { position: absolute; }
  [data-pos-desktop="fixed"]    { position: fixed; }
  [data-pos-desktop="sticky"]   { position: sticky; top: 0; }
  [data-pos-desktop="static"]   { position: static; }
}

/* ══════════════════════════════════════════
   TEXT SIZE (spec 26b)
   Escala tipográfica responsiva via data-text-size.
   Valores com clamp() usam cqw — requer container-type no ancestral.
   ══════════════════════════════════════════ */

[data-text-size="xs"]      { font-size: 0.65rem; }
[data-text-size="sm"]      { font-size: 0.75rem; }
[data-text-size="base"]    { font-size: 1rem; }
[data-text-size="md"]      { font-size: 1.125rem; }
[data-text-size="lg"]      { font-size: clamp(1.2rem, 2.5cqw, 1.8rem); }
[data-text-size="xl"]      { font-size: clamp(1.6rem, 3.5cqw, 2.4rem); }
[data-text-size="2xl"]     { font-size: clamp(2.2rem, 5cqw,   3.5rem); }
[data-text-size="display"] { font-size: clamp(3rem,   8cqw,   6rem);   }

@media (min-width: 768px) {
  [data-text-size-tablet="xs"]      { font-size: 0.65rem; }
  [data-text-size-tablet="sm"]      { font-size: 0.75rem; }
  [data-text-size-tablet="base"]    { font-size: 1rem; }
  [data-text-size-tablet="md"]      { font-size: 1.125rem; }
  [data-text-size-tablet="lg"]      { font-size: clamp(1.2rem, 2.5cqw, 1.8rem); }
  [data-text-size-tablet="xl"]      { font-size: clamp(1.6rem, 3.5cqw, 2.4rem); }
  [data-text-size-tablet="2xl"]     { font-size: clamp(2.2rem, 5cqw,   3.5rem); }
  [data-text-size-tablet="display"] { font-size: clamp(3rem,   8cqw,   6rem);   }
}

@media (min-width: 1024px) {
  [data-text-size-desktop="xs"]      { font-size: 0.65rem; }
  [data-text-size-desktop="sm"]      { font-size: 0.75rem; }
  [data-text-size-desktop="base"]    { font-size: 1rem; }
  [data-text-size-desktop="md"]      { font-size: 1.125rem; }
  [data-text-size-desktop="lg"]      { font-size: clamp(1.2rem, 2.5cqw, 1.8rem); }
  [data-text-size-desktop="xl"]      { font-size: clamp(1.6rem, 3.5cqw, 2.4rem); }
  [data-text-size-desktop="2xl"]     { font-size: clamp(2.2rem, 5cqw,   3.5rem); }
  [data-text-size-desktop="display"] { font-size: clamp(3rem,   8cqw,   6rem);   }
}

/* ══════════════════════════════════════════
   ORDER (spec 26b)
   Controle de order para flex e grid items.
   Caso de uso: reordenar imagem/texto em hero mobile.
   ══════════════════════════════════════════ */

[data-order="first"]  { order: -1; }
[data-order="last"]   { order: 999; }
[data-order="0"]      { order: 0; }
[data-order="1"]      { order: 1; }
[data-order="2"]      { order: 2; }
[data-order="3"]      { order: 3; }

@media (min-width: 768px) {
  [data-order-tablet="first"]  { order: -1; }
  [data-order-tablet="last"]   { order: 999; }
  [data-order-tablet="0"]      { order: 0; }
  [data-order-tablet="1"]      { order: 1; }
  [data-order-tablet="2"]      { order: 2; }
  [data-order-tablet="3"]      { order: 3; }
}

@media (min-width: 1024px) {
  [data-order-desktop="first"]  { order: -1; }
  [data-order-desktop="last"]   { order: 999; }
  [data-order-desktop="0"]      { order: 0; }
  [data-order-desktop="1"]      { order: 1; }
  [data-order-desktop="2"]      { order: 2; }
  [data-order-desktop="3"]      { order: 3; }
}

/* ══════════════════════════════════════════
   ALIGN SELF / JUSTIFY SELF (spec 26b)
   Alinhamento individual de itens dentro de flex/grid.
   ══════════════════════════════════════════ */

[data-align-self="auto"]     { align-self: auto; }
[data-align-self="start"]    { align-self: flex-start; }
[data-align-self="center"]   { align-self: center; }
[data-align-self="end"]      { align-self: flex-end; }
[data-align-self="stretch"]  { align-self: stretch; }
[data-align-self="baseline"] { align-self: baseline; }

[data-justify-self="auto"]    { justify-self: auto; }
[data-justify-self="start"]   { justify-self: start; }
[data-justify-self="center"]  { justify-self: center; }
[data-justify-self="end"]     { justify-self: end; }
[data-justify-self="stretch"] { justify-self: stretch; }

@media (min-width: 768px) {
  [data-align-self-tablet="auto"]     { align-self: auto; }
  [data-align-self-tablet="start"]    { align-self: flex-start; }
  [data-align-self-tablet="center"]   { align-self: center; }
  [data-align-self-tablet="end"]      { align-self: flex-end; }
  [data-align-self-tablet="stretch"]  { align-self: stretch; }
  [data-align-self-tablet="baseline"] { align-self: baseline; }

  [data-justify-self-tablet="auto"]    { justify-self: auto; }
  [data-justify-self-tablet="start"]   { justify-self: start; }
  [data-justify-self-tablet="center"]  { justify-self: center; }
  [data-justify-self-tablet="end"]     { justify-self: end; }
  [data-justify-self-tablet="stretch"] { justify-self: stretch; }
}

@media (min-width: 1024px) {
  [data-align-self-desktop="auto"]     { align-self: auto; }
  [data-align-self-desktop="start"]    { align-self: flex-start; }
  [data-align-self-desktop="center"]   { align-self: center; }
  [data-align-self-desktop="end"]      { align-self: flex-end; }
  [data-align-self-desktop="stretch"]  { align-self: stretch; }
  [data-align-self-desktop="baseline"] { align-self: baseline; }

  [data-justify-self-desktop="auto"]    { justify-self: auto; }
  [data-justify-self-desktop="start"]   { justify-self: start; }
  [data-justify-self-desktop="center"]  { justify-self: center; }
  [data-justify-self-desktop="end"]     { justify-self: end; }
  [data-justify-self-desktop="stretch"] { justify-self: stretch; }
}

/* ══════════════════════════════════════════
   OVERFLOW — RESPONSIVE VARIANTS (spec 26b)
   ══════════════════════════════════════════ */

@media (min-width: 768px) {
  [data-overflow-tablet="hidden"]  { overflow: hidden; }
  [data-overflow-tablet="auto"]    { overflow: auto; }
  [data-overflow-tablet="scroll"]  { overflow: scroll; }
  [data-overflow-tablet="visible"] { overflow: visible; }
}

@media (min-width: 1024px) {
  [data-overflow-desktop="hidden"]  { overflow: hidden; }
  [data-overflow-desktop="auto"]    { overflow: auto; }
  [data-overflow-desktop="scroll"]  { overflow: scroll; }
  [data-overflow-desktop="visible"] { overflow: visible; }
}

/* ══════════════════════════════════════════
   MIN-WIDTH / MIN-HEIGHT — RESPONSIVE VARIANTS (spec 26b)
   ══════════════════════════════════════════ */

@media (min-width: 768px) {
  [data-min-w-tablet="0"]      { min-width: 0; }
  [data-min-w-tablet="sm"]     { min-width: 480px; }
  [data-min-w-tablet="md"]     { min-width: 640px; }
  [data-min-w-tablet="full"]   { min-width: 100%; }
  [data-min-w-tablet="custom"] { min-width: var(--w10-min-w-tablet, var(--w10-min-w)); }

  [data-min-h-tablet="0"]      { min-height: 0; }
  [data-min-h-tablet="screen"] { min-height: 100dvh; }
  [data-min-h-tablet="custom"] { min-height: var(--w10-min-h-tablet, var(--w10-min-h)); }
}

@media (min-width: 1024px) {
  [data-min-w-desktop="0"]      { min-width: 0; }
  [data-min-w-desktop="sm"]     { min-width: 480px; }
  [data-min-w-desktop="md"]     { min-width: 640px; }
  [data-min-w-desktop="full"]   { min-width: 100%; }
  [data-min-w-desktop="custom"] { min-width: var(--w10-min-w-desktop, var(--w10-min-w)); }

  [data-min-h-desktop="0"]      { min-height: 0; }
  [data-min-h-desktop="screen"] { min-height: 100dvh; }
  [data-min-h-desktop="custom"] { min-height: var(--w10-min-h-desktop, var(--w10-min-h)); }
}

/* ══════════════════════════════════════════
   Z-INDEX — RESPONSIVE VARIANTS (spec 26b)
   ══════════════════════════════════════════ */

@media (min-width: 768px) {
  [data-z-tablet="0"]    { z-index: 0; }
  [data-z-tablet="1"]    { z-index: 1; }
  [data-z-tablet="2"]    { z-index: 2; }
  [data-z-tablet="10"]   { z-index: 10; }
  [data-z-tablet="20"]   { z-index: 20; }
  [data-z-tablet="50"]   { z-index: 50; }
  [data-z-tablet="100"]  { z-index: 100; }
  [data-z-tablet="auto"] { z-index: auto; }
}

@media (min-width: 1024px) {
  [data-z-desktop="0"]    { z-index: 0; }
  [data-z-desktop="1"]    { z-index: 1; }
  [data-z-desktop="2"]    { z-index: 2; }
  [data-z-desktop="10"]   { z-index: 10; }
  [data-z-desktop="20"]   { z-index: 20; }
  [data-z-desktop="50"]   { z-index: 50; }
  [data-z-desktop="100"]  { z-index: 100; }
  [data-z-desktop="auto"] { z-index: auto; }
}