/* ============================================================================
   BASE — FUNDAÇÃO BRUTALISTA
   Arquitetura: @layer → tokens → reset → base → states
   Stack: HTML + CSS puro | Modo: Brutalist/Vanguarda
   ============================================================================ */

/* ─────────────────────────────────────────────────
   0. ARQUITETURA DE CAMADAS
   Ordem explícita da cascata — zero surpresas.
───────────────────────────────────────────────── */
@layer reset, tokens, base, states, utilities;


/* ─────────────────────────────────────────────────
   1. @PROPERTY — Custom Properties Animáveis
   Propriedades tipadas que o browser entende e anima.
   Isso é o que 99% dos devs nunca usam.
───────────────────────────────────────────────── */
@property --ink {
  syntax: '<color>';
  inherits: true;
  initial-value: #f5f0e8;
}

@property --paper {
  syntax: '<color>';
  inherits: true;
  initial-value: #0a0a0a;
}

@property --noise-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.04;
}

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --line-width {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}


/* ─────────────────────────────────────────────────
   2. TOKENS — O DNA do Sistema
───────────────────────────────────────────────── */
@layer tokens {

  :root {

    /* ── FONTES ──────────────────────────────────
       Bebas Neue: peso visual, autoridade brutal.
       Space Mono: anti-design intencional, técnico.
       Adicione no HTML:
       <link href="https://fonts.googleapis.com/css2?
         family=Bebas+Neue&
         family=Space+Mono:ital,wght@0,400;0,700;1,400&
         display=swap" rel="stylesheet">
    ─────────────────────────────────────────────── */
    --font-display:  'Bebas Neue', 'Arial Black', impact, sans-serif;
    --font-body:     'Space Mono', 'Courier New', monospace;
    --font-ui:       'Space Mono', monospace;

    /* ── ESCALA TIPOGRÁFICA FLUIDA ───────────────
       Cada passo: clamp(mínimo, preferido, máximo)
       Base matemática: razão 1.333 (quarta perfeita)
    ─────────────────────────────────────────────── */
    --text-2xs:  clamp(0.64rem,  0.6vw  + 0.4rem, 0.75rem);
    --text-xs:   clamp(0.75rem,  0.7vw  + 0.5rem, 0.875rem);
    --text-sm:   clamp(0.875rem, 0.8vw  + 0.6rem, 1rem);
    --text-base: clamp(1rem,     1vw    + 0.7rem, 1.125rem);
    --text-lg:   clamp(1.125rem, 1.2vw  + 0.7rem, 1.333rem);
    --text-xl:   clamp(1.333rem, 1.8vw  + 0.6rem, 1.777rem);
    --text-2xl:  clamp(1.777rem, 2.5vw  + 0.8rem, 2.369rem);
    --text-3xl:  clamp(2.369rem, 4vw    + 0.5rem, 3.157rem);
    --text-4xl:  clamp(3.157rem, 6vw    + 0.3rem, 4.209rem);
    --text-5xl:  clamp(4.209rem, 8vw    + 0.2rem, 6rem);
    --text-6xl:  clamp(5rem,     12vw,            10rem);
    --text-hero: clamp(5rem,     16vw,             16rem);

    /* ── PESOS ───────────────────────────────────*/
    --weight-light:   300;
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-bold:    700;
    --weight-black:   900;

    /* ── LINE HEIGHTS ────────────────────────────*/
    --leading-none:    1;
    --leading-tighter: 1.05;
    --leading-tight:   1.2;
    --leading-snug:    1.375;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;
    --leading-loose:   2;

    /* ── LETTER SPACING ──────────────────────────*/
    --tracking-tightest: -0.06em;
    --tracking-tighter:  -0.04em;
    --tracking-tight:    -0.02em;
    --tracking-normal:    0em;
    --tracking-wide:      0.05em;
    --tracking-wider:     0.1em;
    --tracking-widest:    0.25em;

    /* ── ESCALA DE ESPAÇAMENTO ───────────────────
       Base: 0.25rem (4px). Razão: x2 progressivo.
    ─────────────────────────────────────────────── */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */
    --space-40: 10rem;     /* 160px */
    --space-48: 12rem;     /* 192px */
    --space-64: 16rem;     /* 256px */

    /* Escala fluida de seções */
    --section-gap: clamp(var(--space-16), 10vw, var(--space-48));
    --gutter:      clamp(var(--space-4), 4vw, var(--space-12));
    --container:   min(100% - (var(--gutter) * 2), 72rem);

    /* ── CORES — MODO CLARO ──────────────────────
       Paleta brutalista: papel-tinta com choque de acento.
       Não existe "confortável" aqui. Existe tensão intencional.
    ─────────────────────────────────────────────── */

    /* Cores brutas */
    --raw-black:   #0a0a0a;
    --raw-white:   #f5f0e8;  /* papel — não é branco. É quente. */
    --raw-red:     #e8190f;  /* sangue, não coral */
    --raw-yellow:  #f5c400;  /* aviso, não pastel */
    --raw-blue:    #0039a6;  /* primário puro, sem diluição */
    --raw-green:   #00541a;
    --raw-mid:     #2a2a2a;
    --raw-line:    #1a1a1a;

    /* Semânticas - Light Mode */
    --paper: var(--raw-white);        /* fundo */
    --ink:   var(--raw-black);        /* texto */
    --strike:  var(--raw-red);        /* acento primário */
    --signal:  var(--raw-yellow);     /* acento secundário */
    --void:    var(--raw-mid);        /* superfícies escuras */
    --scar:    var(--raw-line);       /* bordas/linhas */
    --mark:    color-mix(in srgb, var(--raw-black) 8%, var(--raw-white));

    /* Aliases semânticos (retrocompatibilidade) */
    --color-bg:           var(--paper);
    --color-text:         var(--ink);
    --color-text-muted:   color-mix(in srgb, var(--ink) 55%, var(--paper));
    --color-border:       var(--scar);
    --color-primary:      var(--ink);
    --color-accent1:      var(--strike);

    /* ── BORDAS — BRUTALISMO NÃO USA RADIUS ─────
       Zero arredondamento como regra.
       Exceções são declaradas explicitamente, não implicitamente.
    ─────────────────────────────────────────────── */
    --radius-none:   0;
    --radius-sm:     2px;   /* exceção mínima */
    --radius-full:   9999px;

    --border-width-thin:   1px;
    --border-width-base:   2px;
    --border-width-thick:  3px;
    --border-width-brutal: 4px;
    --border-width-heavy:  6px;
    --border-width-slab:   8px;

    /* ── CURVAS DE EASING ────────────────────────
       Nomeadas por personalidade, não por descrição técnica.
       Cubic bezier: inspecione em devtools.
    ─────────────────────────────────────────────── */
    --ease-snap:    cubic-bezier(0.23, 1, 0.32, 1);      /* rápido, para abrupto */
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);   /* ultrapassa e volta */
    --ease-heavy:   cubic-bezier(0.76, 0, 0.24, 1);      /* peso, inércia */
    --ease-linear:  linear;
    --ease-brutal:  steps(6, end);                        /* anti-smooth, glitch */
    --ease-flicker: steps(2, start);                      /* pisca */

    /* ── DURAÇÕES ────────────────────────────────*/
    --duration-instant:  50ms;
    --duration-fast:     120ms;
    --duration-base:     250ms;
    --duration-slow:     450ms;
    --duration-crawl:    800ms;
    --duration-dramatic: 1200ms;

    /* Tokens de transição compostos */
    --transition-snap:   var(--duration-fast)   var(--ease-snap);
    --transition-spring: var(--duration-slow)   var(--ease-spring);
    --transition-heavy:  var(--duration-base)   var(--ease-heavy);
    --transition-brutal: var(--duration-fast)   var(--ease-brutal);

    /* ── SOMBRAS ─────────────────────────────────
       Estilo: sombras sólidas deslocadas (anti-blur).
       Nenhuma sombra difusa — isso é suave demais.
    ─────────────────────────────────────────────── */
    --shadow-xs:     2px  2px  0 var(--scar);
    --shadow-sm:     3px  3px  0 var(--scar);
    --shadow-base:   4px  4px  0 var(--scar);
    --shadow-md:     6px  6px  0 var(--scar);
    --shadow-lg:     8px  8px  0 var(--scar);
    --shadow-xl:     12px 12px 0 var(--scar);
    --shadow-2xl:    16px 16px 0 var(--scar);
    --shadow-brutal: 6px  6px  0 var(--ink);

    /* Sombras coloridas para acento */
    --shadow-red:    4px 4px 0 var(--raw-red);
    --shadow-yellow: 4px 4px 0 var(--raw-yellow);

    /* ── Z-INDEX SYSTEM ──────────────────────────*/
    --z-below:    -1;
    --z-base:      0;
    --z-above:    10;
    --z-sticky:   50;
    --z-overlay: 100;
    --z-modal:   200;
    --z-toast:   300;
    --z-cursor:  999;

    /* ── GRID SYSTEM ─────────────────────────────*/
    --grid-cols:  12;
    --grid-gap:   var(--space-4);
  }


  /* ── DARK MODE ───────────────────────────────────
     Inversão radical: tinta vira papel, papel vira tinta.
     Acento muda de sangue para neon — choque de contexto.
  ─────────────────────────────────────────────────── */
  [data-theme="dark"],
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #080808;
      --ink:   #f0ebe0;
      --strike:  #ff3a2f;
      --signal:  #ffe135;
      --void:    #141414;
      --scar:    #2e2e2e;
      --mark:    color-mix(in srgb, var(--ink) 6%, var(--paper));

      --color-bg:         var(--paper);
      --color-text:       var(--ink);
      --color-text-muted: color-mix(in srgb, var(--ink) 50%, var(--paper));
      --color-border:     var(--scar);
      --color-primary:    var(--ink);
      --color-accent1:    var(--strike);

      --shadow-xs:     2px  2px  0 var(--scar);
      --shadow-sm:     3px  3px  0 var(--scar);
      --shadow-base:   4px  4px  0 var(--scar);
      --shadow-md:     6px  6px  0 var(--scar);
      --shadow-lg:     8px  8px  0 var(--scar);
      --shadow-xl:     12px 12px 0 var(--scar);
      --shadow-2xl:    16px 16px 0 var(--scar);
      --shadow-brutal: 6px  6px  0 var(--ink);
    }
  }

  /* Dark mode explícito via atributo */
  [data-theme="dark"] {
    --paper: #080808;
    --ink:   #f0ebe0;
    --strike:  #ff3a2f;
    --signal:  #ffe135;
    --void:    #141414;
    --scar:    #2e2e2e;
    --mark:    color-mix(in srgb, var(--ink) 6%, var(--paper));

    --color-bg:         var(--paper);
    --color-text:       var(--ink);
    --color-text-muted: color-mix(in srgb, var(--ink) 50%, var(--paper));
    --color-border:     var(--scar);
    --color-primary:    var(--ink);
    --color-accent1:    var(--strike);

    --shadow-xs:     2px  2px  0 var(--scar);
    --shadow-sm:     3px  3px  0 var(--scar);
    --shadow-base:   4px  4px  0 var(--scar);
    --shadow-md:     6px  6px  0 var(--scar);
    --shadow-lg:     8px  8px  0 var(--scar);
    --shadow-xl:     12px 12px 0 var(--scar);
    --shadow-2xl:    16px 16px 0 var(--scar);
    --shadow-brutal: 6px  6px  0 var(--ink);
  }
}


/* ─────────────────────────────────────────────────
   3. RESET — Moderno, Cirúrgico, Sem Opinião
───────────────────────────────────────────────── */
@layer reset {

  /* Modelo de caixa universal */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Remove margin padrão do body e define altura mínima */
  html {
    hanging-punctuation: first last;
    color-scheme: light dark;
  }

  body {
    min-height: 100svh; /* svh: considera barra do browser mobile */
  }

  /* Evita quebra de texto fora do fluxo em elementos inline */
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }

  p, li, figcaption {
    text-wrap: pretty;    /* evita palavras sozinhas na última linha */
    max-width: 75ch;      /* largura de leitura confortável */
  }

  /* Imagens e media: comportamento de bloco, sem overflow */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Elementos de formulário herdam fonte do pai */
  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  /* Remove sublinhado de links — estilos declarados explicitamente */
  a {
    color: inherit;
    text-decoration: none;
  }

  /* Remove estilos de lista — listas semânticas têm role="list" */
  ul, ol {
    list-style: none;
  }

  /* Evita overflow horizontal silencioso */
  body,
  html {
    overflow-x: clip;
  }

  /* Preserva white-space em elementos de código */
  pre {
    white-space: pre-wrap;
  }

  /* Remove border padrão de fieldset */
  fieldset {
    border: none;
  }

  /* Remove seta nativa de summary */
  summary {
    cursor: pointer;
    list-style: none;
  }
  summary::-webkit-details-marker { display: none; }

  /* Torna table cells mais previsíveis */
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}


/* ─────────────────────────────────────────────────
   4. BASE — Estilos Fundamentais com Personalidade
───────────────────────────────────────────────── */
@layer base {

  /* ── HTML ────────────────────────────────────── */
  html {
    font-size: 100%; /* 16px base, nunca mude isso */
    scroll-behavior: smooth;
    /* tab-size para código */
    tab-size: 2;
    /* interpola melhor fontes em WebKit */
    text-rendering: optimizeLegibility;
  }

  /* ── CURSOR CUSTOMIZADO ──────────────────────── */
  html {
    cursor: crosshair; /* brutalista: crosshair, não pointer */
  }

  a, button, [role="button"], label[for] {
    cursor: pointer;
  }

  /* ── BODY ────────────────────────────────────── */
  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--ink);
    background-color: var(--paper);

    /* Transição suave para tema */
    transition:
      background-color var(--duration-slow) var(--ease-heavy),
      color            var(--duration-slow) var(--ease-heavy);

    /* Anti-aliasing cirúrgico */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
  }

  /* ── SELEÇÃO DE TEXTO ────────────────────────── */
  ::selection {
    background-color: var(--strike);
    color: var(--raw-white);
  }

  ::-moz-selection {
    background-color: var(--strike);
    color: var(--raw-white);
  }

  /* ── TIPOGRAFIA — HEADINGS ───────────────────── */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular); /* Bebas Neue só tem 1 peso */
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    color: var(--ink);
    /* Nenhum margin padrão — espaçamento via layout */
  }

  h1 {
    font-size: var(--text-hero);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tightest);
  }

  h2 {
    font-size: var(--text-5xl);
    letter-spacing: var(--tracking-tighter);
  }

  h3 { font-size: var(--text-4xl); }
  h4 { font-size: var(--text-3xl); }
  h5 { font-size: var(--text-2xl); }
  h6 { font-size: var(--text-xl); }

  /* ── PARÁGRAFOS ──────────────────────────────── */
  p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: color-mix(in srgb, var(--ink) 75%, var(--paper));
  }

  p + p {
    margin-top: var(--space-4);
  }

  /* Lead — parágrafo de abertura */
  p.lead {
    font-size: var(--text-lg);
    color: var(--ink);
    line-height: var(--leading-snug);
  }

  /* ── LINKS ───────────────────────────────────── */
  a {
    color: var(--ink);
    text-decoration: none;
    position: relative;

    /* Underline customizado via background */
    background-image: linear-gradient(var(--strike), var(--strike));
    background-size: 100% var(--border-width-base);
    background-position: 0 100%;
    background-repeat: no-repeat;

    transition: background-size var(--transition-snap);
  }

  a:hover {
    background-size: 100% 100%;
    color: var(--paper);
  }

  /* Links sem underline — classe explícita */
  a.no-underline {
    background-image: none;
  }

  a.no-underline:hover {
    color: inherit;
  }

  /* ── FOCO — ACESSIBILIDADE NÃO NEGOCIÁVEL ────── */
  :focus-visible {
    outline: var(--border-width-brutal) solid var(--strike);
    outline-offset: 3px;
    border-radius: var(--radius-none);
  }

  /* Remove outline padrão — :focus-visible é suficiente */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* ── BOTÕES ──────────────────────────────────── */
  button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
  }

  /* ── IMAGENS ─────────────────────────────────── */
  img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Evita imagens borradas em scale */
    image-rendering: auto;
  }

  img[data-filter="brutal"] {
    filter: contrast(1.3) saturate(0) brightness(1.1);
    mix-blend-mode: multiply;
  }

  /* ── FORMULÁRIOS ─────────────────────────────── */
  input,
  textarea,
  select {
    width: 100%;
    background: transparent;
    border: var(--border-width-brutal) solid var(--scar);
    border-radius: var(--radius-none);
    padding: var(--space-3) var(--space-4);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    transition:
      border-color var(--transition-snap),
      box-shadow   var(--transition-snap);
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: var(--shadow-brutal);
  }

  input::placeholder,
  textarea::placeholder {
    color: color-mix(in srgb, var(--ink) 30%, transparent);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: var(--text-xs);
  }

  /* ── CÓDIGO ──────────────────────────────────── */
  code {
    font-family: var(--font-body); /* já somos mono */
    font-size: var(--text-sm);
    background-color: var(--mark);
    border: var(--border-width-thin) solid var(--scar);
    padding: 0.1em 0.35em;
    letter-spacing: 0;
  }

  pre {
    background-color: var(--void);
    color: var(--signal);
    border: var(--border-width-brutal) solid var(--scar);
    padding: var(--space-6) var(--space-8);
    overflow-x: auto;
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
  }

  pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
  }

  /* ── BLOCKQUOTE ──────────────────────────────── */
  blockquote {
    border-left: var(--border-width-slab) solid var(--strike);
    padding: var(--space-4) var(--space-8);
    margin: var(--space-8) 0;
    background-color: var(--mark);
    font-size: var(--text-lg);
    font-style: italic;
    position: relative;
  }

  blockquote::before {
    content: '"';
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    line-height: var(--leading-none);
    color: var(--strike);
    position: absolute;
    top: -0.1em;
    left: var(--space-4);
    pointer-events: none;
  }

  /* ── TABELAS ─────────────────────────────────── */
  table {
    width: 100%;
    border-collapse: collapse;
    border: var(--border-width-brutal) solid var(--ink);
    font-size: var(--text-sm);
  }

  th, td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border: var(--border-width-thin) solid var(--scar);
  }

  th {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    background-color: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }

  tr:hover td {
    background-color: var(--mark);
  }

  /* ── HR ──────────────────────────────────────── */
  hr {
    border: none;
    height: var(--border-width-brutal);
    background-color: var(--ink);
    margin: var(--space-12) 0;
  }

  hr.thin {
    height: var(--border-width-thin);
    background-color: var(--scar);
  }

  /* ── LISTAS ──────────────────────────────────── */
  ul:not([class]),
  ol:not([class]) {
    list-style: none;
    padding-left: var(--space-6);
  }

  ul:not([class]) li::before {
    content: '→';
    color: var(--strike);
    font-family: var(--font-display);
    font-size: var(--text-base);
    margin-left: calc(-1 * var(--space-6));
    margin-right: var(--space-3);
    display: inline-block;
    width: var(--space-6);
  }

  ol:not([class]) {
    counter-reset: brutal-counter;
  }

  ol:not([class]) li {
    counter-increment: brutal-counter;
    position: relative;
  }

  ol:not([class]) li::before {
    content: counter(brutal-counter, decimal-leading-zero) '.';
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--strike);
    letter-spacing: var(--tracking-widest);
    margin-left: calc(-1 * var(--space-8));
    margin-right: var(--space-2);
    display: inline-block;
    width: var(--space-8);
  }

  /* ── DETAILS / SUMMARY ───────────────────────── */
  details {
    border: var(--border-width-brutal) solid var(--ink);
    margin-bottom: var(--space-4);
  }

  summary {
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--paper);
    transition: background-color var(--transition-snap);
  }

  summary:hover {
    background-color: var(--ink);
    color: var(--paper);
  }

  summary::after {
    content: '+';
    font-size: var(--text-xl);
    transition: transform var(--transition-brutal);
  }

  details[open] summary::after {
    transform: rotate(45deg);
  }

  details > :not(summary) {
    padding: var(--space-6);
    border-top: var(--border-width-brutal) solid var(--ink);
  }

  /* ── MARK ────────────────────────────────────── */
  mark {
    background-color: var(--signal);
    color: var(--raw-black);
    padding: 0 0.15em;
  }

  /* ── ABBR ────────────────────────────────────── */
  abbr[title] {
    text-decoration: underline dotted var(--strike);
    cursor: help;
  }

  /* ── SMALL ───────────────────────────────────── */
  small {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }

  /* ── SUP / SUB ───────────────────────────────── */
  sup, sub {
    font-size: var(--text-2xs);
    font-family: var(--font-display);
    color: var(--strike);
  }

  /* ── VIDEO / IFRAME ──────────────────────────── */
  video,
  iframe {
    max-width: 100%;
    display: block;
    border: var(--border-width-brutal) solid var(--scar);
  }

  /* ── SVG INLINE ──────────────────────────────── */
  svg {
    fill: currentColor;
    flex-shrink: 0;
  }
}


/* ─────────────────────────────────────────────────
   5. STATES — Focus, Hover, Active, Disabled
───────────────────────────────────────────────── */
@layer states {

  /* Estado desabilitado */
  :disabled,
  [aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    filter: saturate(0);
  }

  /* Estado de loading */
  [aria-busy="true"] {
    cursor: wait;
    opacity: 0.7;
  }

  /* Estado de selecionado */
  [aria-selected="true"],
  [aria-current="page"] {
    color: var(--paper);
    background-color: var(--ink);
  }
}


/* ─────────────────────────────────────────────────
   6. UTILITIES — Apenas o Essencial
───────────────────────────────────────────────── */
@layer utilities {

  /* Screen reader only */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Container responsivo */
  .container {
    width: var(--container);
    margin-inline: auto;
  }

  /* Invert — util para dark mode manual */
  .invert-theme {
    background-color: var(--ink);
    color: var(--paper);
  }

  .invert-theme ::selection {
    background-color: var(--signal);
    color: var(--raw-black);
  }

  /* Texto decorativo grande */
  .display {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tightest);
  }

  /* Texto em maiúsculas com tracking */
  .label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
  }

  /* Linha decorativa horizontal */
  .rule {
    display: block;
    width: 100%;
    height: var(--border-width-brutal);
    background-color: var(--ink);
  }

  /* Efeito tachado brutalista */
  .strikethrough {
    text-decoration: line-through;
    text-decoration-color: var(--strike);
    text-decoration-thickness: var(--border-width-brutal);
  }
}


/* ─────────────────────────────────────────────────
   7. SCROLLBAR — Customizada, Parte do Design
───────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--paper);
  border-left: var(--border-width-thin) solid var(--scar);
}

::-webkit-scrollbar-thumb {
  background: var(--ink);
  border: var(--border-width-thin) solid var(--paper);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--strike);
}

::-webkit-scrollbar-corner {
  background: var(--paper);
}


/* ─────────────────────────────────────────────────
   8. ACESSIBILIDADE — Não Opcional
───────────────────────────────────────────────── */

/* Reduced motion — desativa TUDO */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Mantém lógica, remove performance */
  [style*="animation"],
  [style*="transition"] {
    animation: none !important;
    transition: none !important;
  }
}

/* High contrast — reforça bordas */
@media (prefers-contrast: more) {
  * {
    border-width: max(var(--border-width-brutal), 2px) !important;
  }

  :focus-visible {
    outline-width: 4px;
  }
}

/* Forced colors (Windows High Contrast) */
@media (forced-colors: active) {
  * {
    forced-color-adjust: auto;
  }
}


/* ─────────────────────────────────────────────────
   9. PRINT — Funcional, Limpo
───────────────────────────────────────────────── */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  html {
    font-size: 12pt;
  }

  body {
    font-family: 'Times New Roman', Georgia, serif;
    line-height: 1.5;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    font-family: 'Times New Roman', serif;
  }

  p, blockquote {
    orphans: 3;
    widows: 3;
  }

  a {
    background: none !important;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    font-style: italic;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: '';
  }

  pre {
    page-break-inside: avoid;
    border: 1px solid #000;
    padding: 1em;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  @page {
    margin: 2cm;
  }
}