/* ==========================================================
   AYW DESIGN SYSTEM
   BASE

   Responsabilidades:
   - reset essencial;
   - documento;
   - tipografia global;
   - links;
   - listas;
   - mídia;
   - elementos de código;
   - acessibilidade;
   - utilitários globais mínimos;
   - movimento reduzido.

   Este arquivo não estiliza componentes.

   Pertencem a outros módulos:
   - botões: components/buttons.css;
   - formulários: components/forms.css;
   - tabelas: components/tables.css;
   - shell autenticado: shell/app-shell.css;
   - navegação: navigation/*.css.
   ========================================================== */


/* ==========================================================
   RESET ESSENCIAL
   ========================================================== */

   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
   html,
   body {
       min-width: 0;
       min-height: 100%;
   }
   
   html {
       background: var(--ayw-bg);
   
       scroll-behavior: smooth;
   
       -webkit-text-size-adjust: 100%;
       text-size-adjust: 100%;
   }
   
   body {
       min-height: 100vh;
       min-height: 100dvh;
   
       margin: 0;
   
       overflow-x: hidden;
   
       background: var(--ayw-bg);
       color: var(--ayw-text);
   
       font-family: var(--ayw-font-sans);
       font-size: var(--ayw-font-size-md);
       font-weight: var(--ayw-font-weight-regular);
       line-height: var(--ayw-line-height-normal);
   
       text-rendering: optimizeLegibility;
   
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   
       transition:
           background-color var(--ayw-transition-base),
           color var(--ayw-transition-base);
   }
   
   
   /* ==========================================================
      HERANÇA DE FONTE
      ========================================================== */
   
   button,
   input,
   select,
   textarea {
       font: inherit;
   }
   
   
   /* ==========================================================
      MÍDIA
      ========================================================== */
   
   img,
   picture,
   video,
   canvas,
   svg {
       display: block;
   
       max-width: 100%;
   }
   
   img {
       height: auto;
   }
   
   iframe {
       max-width: 100%;
   
       border: 0;
   }
   
   
   /* ==========================================================
      TIPOGRAFIA
      ========================================================== */
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       margin:
           0
           0
           var(--ayw-space-4);
   
       color: var(--ayw-text);
   
       font-weight: var(--ayw-font-weight-bold);
       line-height: var(--ayw-line-height-tight);
   }
   
   h1 {
       font-size:
           clamp(
               2rem,
               8vw,
               var(--ayw-font-size-5xl)
           );
   }
   
   h2 {
       font-size:
           clamp(
               1.75rem,
               6vw,
               var(--ayw-font-size-4xl)
           );
   }
   
   h3 {
       font-size:
           clamp(
               1.4rem,
               5vw,
               var(--ayw-font-size-3xl)
           );
   }
   
   h4 {
       font-size: var(--ayw-font-size-2xl);
   }
   
   h5 {
       font-size: var(--ayw-font-size-xl);
   }
   
   h6 {
       font-size: var(--ayw-font-size-lg);
   }
   
   p {
       margin:
           0
           0
           var(--ayw-space-4);
   
       color: var(--ayw-text-soft);
   
       line-height: var(--ayw-line-height-relaxed);
   }
   
   p:last-child {
       margin-bottom: 0;
   }
   
   small {
       color: var(--ayw-text-muted);
   
       font-size: var(--ayw-font-size-sm);
   }
   
   strong,
   b {
       font-weight: var(--ayw-font-weight-bold);
   }
   
   em,
   i {
       font-style: italic;
   }
   
   abbr[title] {
       cursor: help;
   
       text-decoration:
           underline
           dotted;
   
       text-underline-offset: 0.2em;
   }
   
   mark {
       padding:
           0.1em
           0.25em;
   
       border-radius: var(--ayw-radius-xs);
   
       background: var(--ayw-warning-soft);
       color: var(--ayw-text);
   }
   
   hr {
       width: 100%;
       height: 1px;
   
       margin:
           var(--ayw-space-6)
           0;
   
       border: 0;
   
       background: var(--ayw-border);
   }
   
   
   /* ==========================================================
      CÓDIGO
      ========================================================== */
   
   code,
   kbd,
   pre,
   samp {
       font-family: var(--ayw-font-mono);
   }
   
   code {
       padding:
           0.15rem
           0.35rem;
   
       border-radius: var(--ayw-radius-xs);
   
       background: var(--ayw-bg-muted);
       color: var(--ayw-text);
   
       font-size: 0.9em;
   }
   
   kbd {
       display: inline-flex;
       align-items: center;
   
       min-height: 24px;
   
       padding:
           0.15rem
           0.45rem;
   
       border: 1px solid var(--ayw-border-strong);
       border-radius: var(--ayw-radius-xs);
   
       background: var(--ayw-surface-raised);
       color: var(--ayw-text);
   
       font-size: 0.85em;
   
       box-shadow: var(--ayw-shadow-xs);
   }
   
   pre {
       width: 100%;
       max-width: 100%;
   
       margin:
           0
           0
           var(--ayw-space-4);
   
       padding: var(--ayw-space-4);
   
       overflow-x: auto;
   
       border: 1px solid var(--ayw-border);
       border-radius: var(--ayw-radius-md);
   
       background: var(--ayw-bg-muted);
       color: var(--ayw-text);
   
       line-height: var(--ayw-line-height-relaxed);
   
       -webkit-overflow-scrolling: touch;
   }
   
   pre code {
       padding: 0;
   
       border-radius: 0;
   
       background: transparent;
   }
   
   
   /* ==========================================================
      LINKS
      ========================================================== */
   
   a {
       color: var(--ayw-primary);
   
       text-decoration: none;
   
       transition:
           color var(--ayw-transition-fast),
           opacity var(--ayw-transition-fast);
   }
   
   a:hover {
       color: var(--ayw-primary-hover);
   }
   
   a:focus-visible {
       outline: 3px solid var(--ayw-focus-ring);
       outline-offset: 3px;
   
       border-radius: var(--ayw-radius-xs);
   }
   
   
   /* ==========================================================
      LISTAS
      ========================================================== */
   
   ul,
   ol {
       margin:
           0
           0
           var(--ayw-space-4);
   
       padding-left: 1.4rem;
   }
   
   li {
       color: var(--ayw-text-soft);
   }
   
   li + li {
       margin-top: var(--ayw-space-2);
   }
   
   nav ul,
   nav ol {
       margin: 0;
       padding: 0;
   
       list-style: none;
   }
   
   nav li,
   nav li + li {
       margin: 0;
   }
   
   
   /* ==========================================================
      CITAÇÕES
      ========================================================== */
   
   blockquote {
       margin:
           0
           0
           var(--ayw-space-4);
   
       padding:
           var(--ayw-space-4)
           var(--ayw-space-5);
   
       border-left:
           4px solid
           var(--ayw-primary);
   
       background: var(--ayw-bg-soft);
       color: var(--ayw-text-soft);
   }
   
   blockquote > :last-child {
       margin-bottom: 0;
   }
   
   
   /* ==========================================================
      TABELAS
   
      Apenas reset estrutural.
      O visual pertence a components/tables.css.
      ========================================================== */
   
   table {
       border-collapse: collapse;
       border-spacing: 0;
   }
   
   
   /* ==========================================================
      FORMULÁRIOS
   
      Apenas resets seguros.
      O visual pertence a components/forms.css.
      ========================================================== */
   
   input,
   select,
   textarea {
       max-width: 100%;
   }
   
   textarea {
       resize: vertical;
   }
   
   button,
   input,
   select,
   textarea {
       -webkit-tap-highlight-color: transparent;
   }
   
   button,
   select {
       text-transform: none;
   }
   
   button,
   [type="button"],
   [type="reset"],
   [type="submit"] {
       cursor: pointer;
   }
   
   button:disabled,
   input:disabled,
   select:disabled,
   textarea:disabled {
       cursor: not-allowed;
   }
   
   
   /* ==========================================================
      TOUCH
      ========================================================== */
   
   button,
   a,
   input,
   select,
   textarea,
   summary {
       touch-action: manipulation;
   }
   
   
   /* ==========================================================
      SELEÇÃO
      ========================================================== */
   
   ::selection {
       background: var(--ayw-primary);
       color: #ffffff;
   }
   
   
   /* ==========================================================
      FOCO
      ========================================================== */
   
   :focus:not(:focus-visible) {
       outline: none;
   }
   
   
   /* ==========================================================
      PULAR PARA O CONTEÚDO
      ========================================================== */
   
   .ayw-skip-link {
       position: fixed;
   
       top:
           calc(
               var(--ayw-space-3) +
               env(safe-area-inset-top)
           );
   
       left:
           calc(
               var(--ayw-space-3) +
               env(safe-area-inset-left)
           );
   
       z-index: var(--ayw-z-toast);
   
       display: inline-flex;
       align-items: center;
       justify-content: center;
   
       min-height: 44px;
   
       padding:
           var(--ayw-space-3)
           var(--ayw-space-4);
   
       border-radius: var(--ayw-radius-md);
   
       background: var(--ayw-primary);
       color: var(--ayw-text-inverse);
   
       font-size: var(--ayw-font-size-sm);
       font-weight: var(--ayw-font-weight-semibold);
       line-height: 1;
   
       text-decoration: none;
   
       box-shadow: var(--ayw-shadow-md);
   
       transform: translateY(-200%);
   
       transition:
           transform var(--ayw-transition-fast);
   }
   
   .ayw-skip-link:hover {
       background: var(--ayw-primary-hover);
       color: var(--ayw-text-inverse);
   }
   
   .ayw-skip-link:focus,
   .ayw-skip-link:focus-visible {
       outline: 3px solid var(--ayw-focus-ring);
       outline-offset: 2px;
   
       color: var(--ayw-text-inverse);
   
       transform: translateY(0);
   }
   
   
   /* ==========================================================
      ELEMENTOS OCULTOS
      ========================================================== */
   
   [hidden] {
       display: none !important;
   }
   
   .ayw-visually-hidden,
   .visually-hidden {
       position: absolute !important;
   
       width: 1px !important;
       height: 1px !important;
   
       margin: -1px !important;
       padding: 0 !important;
   
       overflow: hidden !important;
   
       clip: rect(0, 0, 0, 0) !important;
       clip-path: inset(50%) !important;
   
       border: 0 !important;
   
       white-space: nowrap !important;
   }
   
   
   /* ==========================================================
      BLOQUEIO GLOBAL DE ROLAGEM
      ========================================================== */
   
   body.ayw-scroll-locked {
       overflow: hidden;
   
       touch-action: none;
   }
   
   
   /* ==========================================================
      MOVIMENTO REDUZIDO
      ========================================================== */
   
   @media (prefers-reduced-motion: reduce) {
       html {
           scroll-behavior: auto;
       }
   
       *,
       *::before,
       *::after {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
   
           scroll-behavior: auto !important;
   
           transition-duration: 0.01ms !important;
       }
   }