/* =========================================================
   GÁVIA LINK — BASE.CSS
   ---------------------------------------------------------
   Fundação global do projeto:
   - Design tokens
   - Reset
   - Tipografia
   - Containers
   - Acessibilidade
   - Elementos HTML básicos
   - Comportamentos globais

   Mobile-first
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {
  /* -------------------------------------------------------
     Brand Colors
  ------------------------------------------------------- */

  --color-red: #E60012;
  --color-wine: #7A0F28;
  --color-cream: #FFFAF7;
  --color-white: #FFFFFF;


  /* -------------------------------------------------------
     Neutral Colors
  ------------------------------------------------------- */

  --color-black: #111111;

  --color-text: #2B1118;
  --color-text-strong: #210B11;
  --color-text-muted: #6E5A60;

  --color-border: rgba(122, 15, 40, 0.12);
  --color-border-strong: rgba(122, 15, 40, 0.22);

  --color-surface: #FFFFFF;
  --color-surface-soft: #FFF4F2;


  /* -------------------------------------------------------
     Brand Gradients
  ------------------------------------------------------- */

  --gradient-brand:
    linear-gradient(
      135deg,
      var(--color-red) 0%,
      #D80018 45%,
      var(--color-wine) 100%
    );

  --gradient-wine:
    linear-gradient(
      135deg,
      #941333 0%,
      var(--color-wine) 100%
    );

  --gradient-soft:
    linear-gradient(
      180deg,
      var(--color-cream) 0%,
      #FFF4F2 100%
    );


  /* -------------------------------------------------------
     Typography
  ------------------------------------------------------- */

  --font-primary:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;


  /* -------------------------------------------------------
     Font Sizes
  ------------------------------------------------------- */

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;

  --font-size-h3:
    clamp(1.35rem, 5vw, 1.75rem);

  --font-size-h2:
    clamp(2rem, 8vw, 3.75rem);

  --font-size-h1:
    clamp(2.65rem, 11vw, 5.6rem);


  /* -------------------------------------------------------
     Font Weights
  ------------------------------------------------------- */

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;


  /* -------------------------------------------------------
     Line Heights
  ------------------------------------------------------- */

  --line-tight: 1.02;
  --line-heading: 1.08;
  --line-normal: 1.55;
  --line-relaxed: 1.7;


  /* -------------------------------------------------------
     Letter Spacing
  ------------------------------------------------------- */

  --tracking-tight: -0.045em;
  --tracking-heading: -0.035em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;


  /* -------------------------------------------------------
     Spacing Scale
  ------------------------------------------------------- */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;


  /* -------------------------------------------------------
     Layout
  ------------------------------------------------------- */

  --container-width: 1180px;

  --container-padding:
    clamp(1.1rem, 5vw, 2rem);

  --section-spacing:
    clamp(4.5rem, 12vw, 8rem);


  /* -------------------------------------------------------
     Border Radius
  ------------------------------------------------------- */

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 44px;

  --radius-pill: 999px;


  /* -------------------------------------------------------
     Shadows
  ------------------------------------------------------- */

  --shadow-xs:
    0 2px 8px rgba(60, 13, 25, 0.05);

  --shadow-sm:
    0 8px 24px rgba(60, 13, 25, 0.08);

  --shadow-md:
    0 18px 45px rgba(60, 13, 25, 0.12);

  --shadow-lg:
    0 28px 70px rgba(60, 13, 25, 0.16);


  /* -------------------------------------------------------
     Transitions
  ------------------------------------------------------- */

  --transition-fast: 160ms ease;
  --transition-normal: 280ms ease;
  --transition-slow: 500ms cubic-bezier(0.22, 1, 0.36, 1);


  /* -------------------------------------------------------
     Z-index Scale
  ------------------------------------------------------- */

  --z-base: 1;
  --z-content: 10;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}


/* =========================================================
   02. RESET
========================================================= */

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


html {
  margin: 0;
  padding: 0;

  font-size: 16px;

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


body {
  margin: 0;
  padding: 0;

  min-width: 320px;

  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-regular);

  line-height: var(--line-normal);

  color: var(--color-text);
  background-color: var(--color-cream);

  overflow-x: hidden;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body,
button,
input,
textarea,
select {
  font-family: var(--font-primary);
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}


ul,
ol {
  margin: 0;
  padding: 0;
}


ul {
  list-style: none;
}


button,
input,
textarea,
select {
  margin: 0;
}


button,
a {
  -webkit-tap-highlight-color: transparent;
}


button {
  border: 0;
}


img,
picture,
svg,
video,
canvas {
  display: block;

  max-width: 100%;
}


img {
  height: auto;
}


a {
  color: inherit;
  text-decoration: none;
}


strong,
b {
  font-weight: var(--font-bold);
}


/* =========================================================
   03. GLOBAL TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-strong);

  font-weight: var(--font-extrabold);

  text-wrap: balance;
}


h1 {
  font-size: var(--font-size-h1);

  line-height: var(--line-tight);

  letter-spacing: var(--tracking-tight);
}


h2 {
  font-size: var(--font-size-h2);

  line-height: var(--line-heading);

  letter-spacing: var(--tracking-heading);
}


h3 {
  font-size: var(--font-size-h3);

  line-height: 1.15;

  letter-spacing: -0.025em;
}


p {
  max-width: 65ch;

  color: var(--color-text-muted);

  text-wrap: pretty;
}


::selection {
  color: var(--color-white);
  background-color: var(--color-red);
}


/* =========================================================
   04. PAGE STRUCTURE
========================================================= */

main {
  display: block;
}


section {
  position: relative;

  width: 100%;
}


.container {
  width: min(
    100% - (var(--container-padding) * 2),
    var(--container-width)
  );

  margin-inline: auto;
}


/* =========================================================
   05. GENERIC SECTION SPACING
========================================================= */

.section {
  padding-block: var(--section-spacing);
}


/* =========================================================
   06. ACCESSIBILITY
========================================================= */

.sr-only {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


:focus-visible {
  outline: 3px solid rgba(230, 0, 18, 0.35);

  outline-offset: 4px;
}


a:focus-visible,
button:focus-visible {
  border-radius: var(--radius-xs);
}


/* =========================================================
   07. FORM ELEMENTS
========================================================= */

button,
input,
textarea,
select {
  font: inherit;
}


button,
[role="button"],
a {
  touch-action: manipulation;
}


button:not(:disabled) {
  cursor: pointer;
}


button:disabled {
  cursor: not-allowed;

  opacity: 0.55;
}


/* =========================================================
   08. IMAGES
========================================================= */

img {
  user-select: none;

  -webkit-user-drag: none;
}


figure {
  margin: 0;
}


/* =========================================================
   09. GENERIC SURFACES
========================================================= */

.surface {
  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);
}


.surface--soft {
  background-color: var(--color-surface-soft);
}


/* =========================================================
   10. GENERIC TEXT UTILITIES
========================================================= */

.text-red {
  color: var(--color-red);
}


.text-wine {
  color: var(--color-wine);
}


.text-white {
  color: var(--color-white);
}


.text-center {
  text-align: center;
}


.text-balance {
  text-wrap: balance;
}


/* =========================================================
   11. GENERIC BACKGROUND UTILITIES
========================================================= */

.bg-cream {
  background-color: var(--color-cream);
}


.bg-white {
  background-color: var(--color-white);
}


.bg-red {
  background-color: var(--color-red);
}


.bg-wine {
  background-color: var(--color-wine);
}


.bg-brand-gradient {
  background: var(--gradient-brand);
}


/* =========================================================
   12. SCROLLBAR
   Desktop browsers that support it
========================================================= */

@media (hover: hover) and (pointer: fine) {

  html {
    scrollbar-width: thin;

    scrollbar-color:
      rgba(122, 15, 40, 0.35)
      var(--color-cream);
  }


  ::-webkit-scrollbar {
    width: 10px;
  }


  ::-webkit-scrollbar-track {
    background: var(--color-cream);
  }


  ::-webkit-scrollbar-thumb {
    background-color: rgba(122, 15, 40, 0.28);

    border: 3px solid var(--color-cream);

    border-radius: var(--radius-pill);
  }


  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(122, 15, 40, 0.45);
  }

}


/* =========================================================
   13. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }

}


/* =========================================================
   14. LARGER SCREENS
========================================================= */

@media (min-width: 768px) {

  :root {
    --container-padding: 2rem;
  }

}


@media (min-width: 1200px) {

  :root {
    --container-padding: 2.5rem;
  }

}