@layer h-tokens, h-reset, h-base, h-layout, h-components, h-utilities;

@font-face {
  font-family: "Mark Pro";
  src: url("./assets/fonts/markpromedium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Mark Pro";
  src: url("./assets/fonts/markprobold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Mark Pro";
  src: url("./assets/fonts/markproheavy.otf") format("opentype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Chainprinter";
  src: url("./assets/fonts/Chainprinter Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@layer h-tokens {
  :root {
    color-scheme: light;

    --h-white: #ffffff;
    --h-blue-500: #2394e1;
    --h-blue-800: #1b4a81;
    --h-cyan-400: #53c4e6;
    --h-lime-500: #e2e794;
    --h-sand-100: #fbf4e1;

    --h-blue-50: #eff8fe;
    --h-blue-700: #146aaa;
    --h-blue-900: #163e6c;
    --h-neutral-100: #f3f5f7;
    --h-neutral-300: #b5c2d0;
    --h-neutral-600: #53677e;
    --h-green-50: #edf8f0;
    --h-green-700: #23633a;
    --h-red-50: #fff1f0;
    --h-red-700: #a52724;
    --h-amber-50: #fff6dd;
    --h-amber-800: #795000;

    /* Semantic tokens: consume these in components. */
    --h-color-canvas: var(--h-white);
    --h-color-surface: var(--h-white);
    --h-color-surface-soft: var(--h-blue-50);
    --h-color-surface-warm: var(--h-sand-100);
    --h-color-text: var(--h-blue-800);
    --h-color-text-muted: var(--h-neutral-600);
    --h-color-text-inverse: var(--h-white);
    --h-color-accent: var(--h-blue-500);
    --h-color-link: var(--h-blue-700);
    --h-color-border: var(--h-neutral-300);
    --h-color-divider: var(--h-lime-500);
    --h-color-action: var(--h-lime-500);
    --h-color-on-action: var(--h-blue-800);
    --h-color-action-secondary: var(--h-cyan-400);
    --h-color-on-secondary: var(--h-blue-900);
    --h-color-focus: var(--h-blue-900);
    --h-color-success: var(--h-green-700);
    --h-color-danger: var(--h-red-700);
    --h-color-warning: var(--h-amber-800);

    --h-font-body: "Mark Pro", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
    --h-font-label: "Chainprinter", "Courier New", monospace;
    --h-weight-medium: 500;
    --h-weight-bold: 700;
    --h-weight-heavy: 800;
    --h-text-xs: 0.75rem;
    --h-text-sm: 0.875rem;
    --h-text-md: 1rem;
    --h-text-lg: 1.25rem;
    --h-text-xl: 1.5rem;
    --h-text-2xl: 2rem;
    --h-text-3xl: 3rem;
    --h-leading-body: 1.5;
    --h-leading-title: 1.166667;
    --h-leading-control: 1.2;
    --h-tracking-label: 0.04em;

    --h-space-0: 0;
    --h-space-1: 0.25rem;
    --h-space-2: 0.5rem;
    --h-space-3: 0.75rem;
    --h-space-4: 1rem;
    --h-space-5: 1.25rem;
    --h-space-6: 1.5rem;
    --h-space-8: 2rem;
    --h-space-10: 2.5rem;
    --h-space-12: 3rem;
    --h-space-16: 4rem;
    --h-space-20: 5rem;
    --h-space-24: 6rem;

    --h-radius-sm: 0.25rem;
    --h-radius-md: 0.75rem;
    --h-radius-lg: 1rem;
    --h-radius-card: 1.5rem;
    --h-radius-pill: 100vmax;
    /* Clockwise: top-left, top-right, bottom-right, bottom-left. */
    --h-radius-action: 1rem 1rem 1rem 0.25rem;
    --h-radius-table: 1.5rem 1.5rem 1.5rem 0.5rem;
    --h-radius-search: 1rem 6.25rem 6.25rem 0.25rem;
    --h-border-width: 1px;
    --h-shadow-card: 0 4px 40px rgb(0 0 0 / 8%);
    --h-shadow-raised: 0 8px 32px rgb(27 74 129 / 16%);

    --h-container: 69.5rem;
    /* 1112px content area in the 1920px frame. */
    --h-gutter: clamp(1rem, 4vw, 2.5rem);
    --h-section-space: clamp(3rem, 7vw, 6rem);
    --h-control-height: 3.25rem;
    --h-target-min: 2.75rem;
    --h-product-width: 16.0625rem;
    /* 257px */
    --h-product-min-height: 33rem;
    /* 528px, grows with content */
    --h-product-padding-inline: 1.6875rem;
    /* 27px, observed exception */
    --h-product-image-height: 12.4375rem;
    /* 199px */
    --movimento-resposta: 200ms;
    --movimento-painel: 300ms;
    --movimento-entrada: 750ms;
    --movimento-intervalo: 320ms;
    --movimento-curva: cubic-bezier(0.16, 1, 0.3, 1);
    --h-duration-fast: 150ms;
    --h-duration-normal: 250ms;
    --h-ease: cubic-bezier(0.2, 0, 0, 1);
    --h-z-sticky: 10;
    --h-z-overlay: 100;
  }
}

@layer h-reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
    margin: 0;
  }

  :where(button, input, select, textarea) {
    font: inherit;
  }

  :where(button, input, select, textarea) {
    max-inline-size: 100%;
  }

  :where(img, video) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(button) {
    cursor: pointer;
  }

  :where(fieldset) {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  :where(legend) {
    padding: 0;
  }

  [hidden] {
    display: none !important;
  }
}

@layer h-base {
  html {
    scroll-padding-block-start: var(--h-space-8);
  }

  body {
    background: var(--h-color-canvas);
    color: var(--h-color-text);
    font-family: var(--h-font-body);
    font-size: var(--h-text-md);
    font-weight: var(--h-weight-medium);
    line-height: var(--h-leading-body);
    overflow-wrap: break-word;
  }

  :where(a) {
    color: var(--h-color-link);
    text-underline-offset: 0.2em;
  }

  :where(a:hover) {
    text-decoration-thickness: 2px;
  }

  :where(button, input, textarea, select) {
    color: inherit;
  }

  :where(h1, h2, h3, h4) {
    font-weight: var(--h-weight-bold);
    line-height: var(--h-leading-title);
  }

  :where(:focus-visible) {
    outline: 3px solid var(--h-color-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--h-white);
  }

  ::selection {
    background: var(--h-lime-500);
    color: var(--h-blue-800);
  }
}

@layer h-components {
  .pular-conteudo {
    position: fixed;
    inset-block-start: var(--h-space-4);
    inset-inline-start: var(--h-space-4);
    z-index: var(--h-z-overlay);
    padding: var(--h-space-3);
    transform: translateY(-200%);
    background: var(--h-white);
    color: var(--h-blue-800);
  }

  .pular-conteudo:focus {
    transform: translateY(0);
  }

}