/* ==========================================================================
   RM — DESIGN SYSTEM  ·  Rodrigo Miguel
   v1.0 · Núcleo reutilizável (tokens + base + componentes)
   --------------------------------------------------------------------------
   REGRA MESTRA: paleta base de SEIS cores + par de AÇÃO em verde (2). Nenhuma
   outra matiz pode ser criada. Profundidade se constrói com ALPHA dessas cores,
   nunca com tons novos.
   Tipografia: DM Sans em 100% dos elementos, sem exceção.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · TOKENS PRIMITIVOS
   -------------------------------------------------------------------------- */
:root {
  /* ---- Paleta base — as 6 cores da identidade ---- */
  --rm-void:        #000000;  /* Preto absoluto   · fundo profundo, vazio     */
  --rm-ink:         #040B1A;  /* Preto azulado    · superfície principal dark */
  --rm-blue-deep:   #002BB3;  /* Azul profundo    · institucional, estrutura  */
  --rm-blue:        #1F40EC;  /* Azul elétrico    · ação, foco, energia       */
  --rm-mist:        #CCCCCC;  /* Cinza            · neutro, texto secundário  */
  --rm-light:       #E9EEFA;  /* Off-white azulado· texto e superfície light  */

  /* Par de AÇÃO — botões, CTA e foco. Único uso autorizado do verde.
     12.09:1 sobre preto: o verde é o único acento que passa como texto no escuro. */
  --rm-green:       #2FE07F;  /* Verde ação       · botão primário, foco       */
  --rm-green-deep:  #22C55E;  /* Verde profundo   · hover/pressionado          */

  /* Par DESTRUTIVO — excluir, cancelar, erro. Nunca decoração.
     6.86:1 sobre preto e 6.86:1 com texto preto em cima. */
  --rm-red:         #FF5A5A;  /* Vermelho ação    · excluir, erro              */
  --rm-red-deep:    #EF4444;  /* Vermelho profundo· hover/pressionado          */

  /* ---- Canais RGB (para composição com alpha) ---- */
  --rm-void-rgb:       0 0 0;
  --rm-ink-rgb:        4 11 26;
  --rm-blue-deep-rgb:  0 43 179;
  --rm-blue-rgb:       31 64 236;
  --rm-mist-rgb:       204 204 204;
  --rm-light-rgb:      233 238 250;
  --rm-green-rgb:      47 224 127;
  --rm-green-deep-rgb: 34 197 94;
  --rm-red-rgb:        255 90 90;
  --rm-red-deep-rgb:   239 68 68;

  /* ---- Tipografia ---- */
  --rm-font: "DM Sans", "DM Sans Placeholder", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rm-font-mono: "DM Sans", ui-monospace, monospace; /* DM Sans + tabular-nums */

  --rm-w-thin:      200;
  --rm-w-extralight: 250;
  --rm-w-light:     300;
  --rm-w-regular:   400;
  --rm-w-medium:    500;
  --rm-w-semibold:  600;
  --rm-w-bold:      700;
  --rm-w-black:     900;

  /* Escala tipográfica fluida — base 16px, razão ~1.25 */
  --rm-fs-display-xl: clamp(3.25rem, 11.5vw, 9.5rem);
  --rm-fs-display-l:  clamp(2.5rem, 7.5vw, 5.5rem);
  --rm-fs-display-m:  clamp(2rem, 5.2vw, 3.5rem);
  --rm-fs-h1:         clamp(1.875rem, 4vw, 2.75rem);
  --rm-fs-h2:         clamp(1.5rem, 3vw, 2rem);
  --rm-fs-h3:         clamp(1.25rem, 2.2vw, 1.5rem);
  --rm-fs-h4:         1.125rem;
  --rm-fs-body-l:     1.125rem;
  --rm-fs-body:       1rem;
  --rm-fs-body-s:     0.9375rem;
  --rm-fs-caption:    0.8125rem;
  --rm-fs-micro:      0.6875rem;

  --rm-lh-tight:   0.88;
  --rm-lh-snug:    1.08;
  --rm-lh-heading: 1.18;
  --rm-lh-body:    1.62;
  --rm-lh-loose:   1.8;

  /* Sem tracking negativo em lugar nenhum: as letras precisam respirar. */
  --rm-ls-mega:    0;        /* displays grandes            */
  --rm-ls-tight:   0;        /* títulos                     */
  --rm-ls-normal:  0;        /* corpo                       */
  --rm-ls-wide:     0.08em;
  --rm-ls-label:    0.18em;  /* labels caixa-alta           */

  /* ---- Espaçamento · base 4px ---- */
  --rm-sp-0:   0;
  --rm-sp-1:   0.25rem;  /*  4 */
  --rm-sp-2:   0.5rem;   /*  8 */
  --rm-sp-3:   0.75rem;  /* 12 */
  --rm-sp-4:   1rem;     /* 16 */
  --rm-sp-5:   1.5rem;   /* 24 */
  --rm-sp-6:   2rem;     /* 32 */
  --rm-sp-7:   2.5rem;   /* 40 */
  --rm-sp-8:   3rem;     /* 48 */
  --rm-sp-9:   4rem;     /* 64 */
  --rm-sp-10:  5rem;     /* 80 */
  --rm-sp-11:  7.5rem;   /* 120 */
  --rm-sp-12:  10rem;    /* 160 */

  /* ---- Raio · reto por padrão, curva total nas pílulas (eco do logo) ---- */
  --rm-r-none:  0px;
  --rm-r-xs:    2px;
  --rm-r-sm:    4px;
  --rm-r-md:    8px;
  --rm-r-lg:    14px;
  --rm-r-xl:    24px;
  --rm-r-full:  999px;

  /* ---- Traço ---- */
  --rm-bw-hair:   1px;
  --rm-bw-base:   1.5px;
  --rm-bw-strong: 2px;
  --rm-bw-mega:   4px;

  /* ---- Grid & layout ---- */
  --rm-container: 1320px;
  --rm-container-narrow: 780px;
  --rm-gutter: clamp(1.25rem, 4vw, 3rem);
  --rm-cols: 12;

  /* ---- Ângulo — eco dos cortes a 45° do símbolo RM ---- */
  --rm-angle: 45deg;

  /* ---- Movimento ---- */
  --rm-dur-instant: 90ms;
  --rm-dur-fast:    160ms;
  --rm-dur-base:    260ms;
  --rm-dur-slow:    460ms;
  --rm-dur-reveal:  760ms;
  --rm-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --rm-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --rm-ease-entry:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Camadas (z-index) ---- */
  --rm-z-base: 1;
  --rm-z-sticky: 100;
  --rm-z-nav: 200;
  --rm-z-overlay: 300;
  --rm-z-modal: 400;
  --rm-z-toast: 500;
}

/* --------------------------------------------------------------------------
   02 · TOKENS SEMÂNTICOS — TEMA ESCURO (padrão da marca)
   Superfícies e bordas são SEMPRE alpha das 6 cores. Nunca uma cor nova.
   -------------------------------------------------------------------------- */
:root,
[data-rm-theme="dark"] {
  color-scheme: dark;

  --rm-bg:            var(--rm-void);
  --rm-bg-deep:       var(--rm-void);
  --rm-bg-elevated:   rgb(var(--rm-light-rgb) / 0.045);

  --rm-surface:       rgb(var(--rm-light-rgb) / 0.04);
  --rm-surface-hover: rgb(var(--rm-light-rgb) / 0.075);
  --rm-surface-sunken: rgb(var(--rm-void-rgb) / 0.4);
  --rm-surface-accent: rgb(var(--rm-green-rgb) / 0.1);
  --rm-surface-blue:   rgb(var(--rm-blue-rgb) / 0.12);

  --rm-border:        rgb(var(--rm-light-rgb) / 0.12);
  --rm-border-soft:   rgb(var(--rm-light-rgb) / 0.07);
  --rm-border-strong: rgb(var(--rm-light-rgb) / 0.28);
  --rm-border-accent: rgb(var(--rm-green-rgb) / 0.5);
  --rm-border-blue:   rgb(var(--rm-blue-rgb) / 0.55);

  --rm-text:          var(--rm-light);
  --rm-text-muted:    var(--rm-mist);
  --rm-text-subtle:   rgb(var(--rm-mist-rgb) / 0.58);
  /* Verde sobre preto = 12.09:1 → é o único acento que pode ser TEXTO no escuro.
     O azul continua sendo cor GRÁFICA (brilho, traço, gráfico), nunca texto:
     #1F40EC sobre #000000 = 3.0:1 e sobre #040B1A = 2.81:1. Ver regra A-03. */
  --rm-text-accent:   var(--rm-green);
  --rm-text-on-accent: var(--rm-void);

  --rm-accent:        var(--rm-green);
  --rm-accent-graphic: var(--rm-blue);
  --rm-accent-hover:  var(--rm-green-deep);
  --rm-accent-quiet:  rgb(var(--rm-green-rgb) / 0.14);

  --rm-danger:        var(--rm-red);
  --rm-danger-hover:  var(--rm-red-deep);
  --rm-danger-quiet:  rgb(var(--rm-red-rgb) / 0.12);
  --rm-text-on-danger: var(--rm-void);

  --rm-focus:         var(--rm-green);
  --rm-scrim:         rgb(var(--rm-void-rgb) / 0.72);

  --rm-shadow-sm:  0 1px 2px rgb(var(--rm-void-rgb) / 0.6);
  --rm-shadow-md:  0 8px 24px -8px rgb(var(--rm-void-rgb) / 0.8);
  --rm-shadow-lg:  0 32px 64px -24px rgb(var(--rm-void-rgb) / 0.9);
  --rm-glow:       0 0 0 1px rgb(var(--rm-blue-rgb) / 0.4), 0 8px 40px -8px rgb(var(--rm-blue-rgb) / 0.45);
  --rm-glow-soft:  0 12px 60px -20px rgb(var(--rm-blue-rgb) / 0.55);
  --rm-glow-action: 0 8px 32px -8px rgb(var(--rm-green-rgb) / 0.55);
  --rm-glow-danger: 0 8px 32px -8px rgb(var(--rm-red-rgb) / 0.5);
}

/* --------------------------------------------------------------------------
   03 · TOKENS SEMÂNTICOS — TEMA CLARO
   Mesma paleta, papéis invertidos. O branco puro NÃO existe no sistema:
   a superfície mais clara possível é #E9EEFA.
   -------------------------------------------------------------------------- */
[data-rm-theme="light"] {
  color-scheme: light;

  --rm-bg:            var(--rm-light);
  --rm-bg-deep:       var(--rm-mist);
  --rm-bg-elevated:   rgb(var(--rm-light-rgb) / 1);

  --rm-surface:       rgb(var(--rm-ink-rgb) / 0.04);
  --rm-surface-hover: rgb(var(--rm-ink-rgb) / 0.07);
  --rm-surface-sunken: rgb(var(--rm-ink-rgb) / 0.06);
  --rm-surface-accent: rgb(var(--rm-green-deep-rgb) / 0.12);
  --rm-surface-blue:   rgb(var(--rm-blue-rgb) / 0.1);

  --rm-border:        rgb(var(--rm-ink-rgb) / 0.14);
  --rm-border-soft:   rgb(var(--rm-ink-rgb) / 0.08);
  --rm-border-strong: rgb(var(--rm-ink-rgb) / 0.32);
  --rm-border-accent: rgb(var(--rm-green-deep-rgb) / 0.6);
  --rm-border-blue:   rgb(var(--rm-blue-rgb) / 0.6);

  --rm-text:          var(--rm-ink);
  --rm-text-muted:    rgb(var(--rm-ink-rgb) / 0.66);
  --rm-text-subtle:   rgb(var(--rm-ink-rgb) / 0.46);
  /* No claro o verde reprova como texto (1.5:1). Acento textual = azul profundo. */
  --rm-text-accent:   var(--rm-blue-deep);
  --rm-text-on-accent: var(--rm-void);

  --rm-accent:        var(--rm-green);
  --rm-accent-graphic: var(--rm-blue);
  --rm-accent-hover:  var(--rm-green-deep);
  --rm-accent-quiet:  rgb(var(--rm-blue-rgb) / 0.12);

  --rm-danger:        var(--rm-red-deep);
  --rm-danger-hover:  var(--rm-red);
  --rm-danger-quiet:  rgb(var(--rm-red-deep-rgb) / 0.12);
  --rm-text-on-danger: var(--rm-void);

  --rm-focus:         var(--rm-blue-deep);
  --rm-scrim:         rgb(var(--rm-ink-rgb) / 0.55);

  --rm-shadow-sm:  0 1px 2px rgb(var(--rm-ink-rgb) / 0.12);
  --rm-shadow-md:  0 8px 24px -10px rgb(var(--rm-ink-rgb) / 0.22);
  --rm-shadow-lg:  0 32px 64px -28px rgb(var(--rm-ink-rgb) / 0.3);
  --rm-glow:       0 0 0 1px rgb(var(--rm-blue-rgb) / 0.35), 0 8px 32px -10px rgb(var(--rm-blue-rgb) / 0.35);
  --rm-glow-soft:  0 12px 48px -20px rgb(var(--rm-blue-rgb) / 0.3);
  --rm-glow-action: 0 8px 28px -10px rgb(var(--rm-green-deep-rgb) / 0.5);
}

/* --------------------------------------------------------------------------
   04 · RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  /* DM Sans em 100% da interface — regra inegociável da marca */
  font-family: var(--rm-font);
  font-optical-sizing: auto;
  font-weight: var(--rm-w-regular);
  font-size: var(--rm-fs-body);
  line-height: var(--rm-lh-body);
  letter-spacing: var(--rm-ls-normal);
  color: var(--rm-text);
  background-color: var(--rm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Nenhum elemento pode escapar da DM Sans */
button, input, select, textarea, optgroup, code, pre, kbd, samp, th, td, legend {
  font-family: var(--rm-font);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

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

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: var(--rm-bw-hair) solid var(--rm-border); }

::selection { background: var(--rm-blue); color: var(--rm-light); }

:focus-visible {
  outline: var(--rm-bw-strong) solid var(--rm-focus);
  outline-offset: 3px;
  border-radius: var(--rm-r-xs);
}

@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;
  }
}

/* --------------------------------------------------------------------------
   05 · TIPOGRAFIA — CLASSES UTILITÁRIAS
   -------------------------------------------------------------------------- */
/* Displays são LEVES por definição: o tamanho carrega o peso, não a espessura. */
.rm-display-xl,
.rm-display-l,
.rm-display-m {
  letter-spacing: var(--rm-ls-mega);
  line-height: var(--rm-lh-tight);
  text-wrap: balance;
}
.rm-display-xl { font-size: var(--rm-fs-display-xl); font-weight: var(--rm-w-thin); }
.rm-display-l  { font-size: var(--rm-fs-display-l);  font-weight: var(--rm-w-extralight); }
.rm-display-m  { font-size: var(--rm-fs-display-m);  font-weight: var(--rm-w-light); line-height: var(--rm-lh-snug); }

h1, .rm-h1 { font-size: var(--rm-fs-h1); font-weight: var(--rm-w-light);    letter-spacing: var(--rm-ls-tight);  line-height: var(--rm-lh-heading); text-wrap: balance; }
h2, .rm-h2 { font-size: var(--rm-fs-h2); font-weight: var(--rm-w-light);    letter-spacing: var(--rm-ls-tight);  line-height: var(--rm-lh-heading); text-wrap: balance; }
h3, .rm-h3 { font-size: var(--rm-fs-h3); font-weight: var(--rm-w-regular);  letter-spacing: var(--rm-ls-tight);  line-height: var(--rm-lh-heading); }
h4, .rm-h4 { font-size: var(--rm-fs-h4); font-weight: var(--rm-w-medium);   letter-spacing: var(--rm-ls-normal); line-height: var(--rm-lh-heading); }

.rm-lead      { font-size: var(--rm-fs-body-l); line-height: var(--rm-lh-loose); color: var(--rm-text-muted); font-weight: var(--rm-w-light); text-wrap: pretty; }
.rm-body      { font-size: var(--rm-fs-body); }
.rm-body-s    { font-size: var(--rm-fs-body-s); }
.rm-caption   { font-size: var(--rm-fs-caption); line-height: 1.5; color: var(--rm-text-muted); }

.rm-label {
  font-size: var(--rm-fs-micro);
  font-weight: var(--rm-w-medium);
  letter-spacing: var(--rm-ls-label);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rm-text-subtle);
}

.rm-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.rm-mono {
  font-family: var(--rm-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: var(--rm-w-medium);
}

.rm-accent-text { color: var(--rm-text-accent); }
.rm-muted       { color: var(--rm-text-muted); }
.rm-subtle      { color: var(--rm-text-subtle); }

/* --------------------------------------------------------------------------
   06 · LAYOUT
   -------------------------------------------------------------------------- */
.rm-container {
  width: 100%;
  max-width: var(--rm-container);
  margin-inline: auto;
  padding-inline: var(--rm-gutter);
}
.rm-container--narrow { max-width: var(--rm-container-narrow); }

.rm-grid { display: grid; gap: var(--rm-sp-5); grid-template-columns: repeat(var(--rm-cols), minmax(0, 1fr)); }
.rm-stack { display: flex; flex-direction: column; gap: var(--rm-sp-4); }
.rm-row { display: flex; align-items: center; gap: var(--rm-sp-3); flex-wrap: wrap; }

.rm-auto-grid {
  display: grid;
  gap: var(--rm-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* --------------------------------------------------------------------------
   07 · BOTÕES
   -------------------------------------------------------------------------- */
.rm-btn {
  --_bg: transparent;
  --_fg: var(--rm-text);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rm-sp-2);
  padding: 0.875rem 1.5rem;
  min-height: 48px;
  font-size: var(--rm-fs-body-s);
  font-weight: var(--rm-w-medium);
  line-height: 1;
  color: var(--_fg);
  background: var(--_bg);
  border: var(--rm-bw-base) solid var(--_bd);
  border-radius: var(--rm-r-sm);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  transition:
    background-color var(--rm-dur-fast) var(--rm-ease-out),
    border-color var(--rm-dur-fast) var(--rm-ease-out),
    color var(--rm-dur-fast) var(--rm-ease-out),
    transform var(--rm-dur-fast) var(--rm-ease-out),
    box-shadow var(--rm-dur-base) var(--rm-ease-out);
}
.rm-btn:hover { transform: translateY(-1px); }
.rm-btn:active { transform: translateY(0); }
.rm-btn:disabled,
.rm-btn[aria-disabled="true"] { opacity: 0.38; pointer-events: none; }

/* Primário — o verde é reservado para a ação principal da tela */
.rm-btn--primary {
  --_bg: var(--rm-accent);
  --_fg: var(--rm-text-on-accent);
  --_bd: var(--rm-accent);
  font-weight: var(--rm-w-medium);
}
.rm-btn--primary:hover {
  --_bg: var(--rm-accent-hover);
  --_bd: var(--rm-accent-hover);
  box-shadow: var(--rm-glow-action);
}

/* Destrutivo — excluir, cancelar, remover. Texto preto sobre vermelho. */
.rm-btn--danger {
  --_bg: var(--rm-danger);
  --_fg: var(--rm-text-on-danger);
  --_bd: var(--rm-danger);
  font-weight: var(--rm-w-medium);
}
.rm-btn--danger:hover {
  --_bg: var(--rm-danger-hover);
  --_bd: var(--rm-danger-hover);
  box-shadow: var(--rm-glow-danger);
}

/* Destrutivo discreto — contorno vermelho, para ações fora do fluxo principal */
.rm-btn--danger-ghost {
  --_fg: var(--rm-red);
  --_bd: rgb(var(--rm-red-rgb) / 0.45);
}
.rm-btn--danger-ghost:hover {
  --_bg: var(--rm-danger-quiet);
  --_bd: var(--rm-red);
}

/* Azul elétrico — ação institucional/secundária de destaque.
   O texto é off-white: 6.02:1. Nunca use azul como TEXTO sobre preto. */
.rm-btn--blue {
  --_bg: var(--rm-blue);
  --_fg: var(--rm-light);
  --_bd: var(--rm-blue);
  font-weight: var(--rm-w-medium);
}
.rm-btn--blue:hover {
  --_bg: var(--rm-blue-deep);
  --_bd: var(--rm-blue-deep);
  box-shadow: var(--rm-glow-soft);
}

/* Secundário — contorno */
.rm-btn--secondary { --_fg: var(--rm-text); --_bd: var(--rm-border-strong); }
.rm-btn--secondary:hover { --_bg: var(--rm-surface-hover); --_bd: var(--rm-text); }

/* Terciário / ghost */
.rm-btn--ghost { --_fg: var(--rm-text-muted); }
.rm-btn--ghost:hover { --_bg: var(--rm-surface); --_fg: var(--rm-text); }

/* Sólido neutro — inverte o fundo */
.rm-btn--invert { --_bg: var(--rm-text); --_fg: var(--rm-bg); --_bd: var(--rm-text); }
.rm-btn--invert:hover { --_bg: var(--rm-mist); --_bd: var(--rm-mist); }

/* Link */
.rm-btn--link {
  --_fg: var(--rm-text-accent);
  padding: 0; min-height: 0; border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.rm-btn--link:hover { --_fg: var(--rm-text); }

/* Tamanhos */
.rm-btn--sm { padding: 0.5rem 0.875rem; min-height: 36px; font-size: var(--rm-fs-caption); }
.rm-btn--lg { padding: 1.125rem 2rem; min-height: 58px; font-size: var(--rm-fs-body); }
.rm-btn--block { width: 100%; }
.rm-btn--pill { border-radius: var(--rm-r-full); }

/* Seta que desliza — micro-interação padrão do sistema */
.rm-btn__arrow { transition: transform var(--rm-dur-base) var(--rm-ease-out); }
.rm-btn:hover .rm-btn__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   08 · FORMULÁRIOS
   -------------------------------------------------------------------------- */
.rm-field { display: flex; flex-direction: column; gap: var(--rm-sp-2); }

.rm-field__label {
  font-size: var(--rm-fs-caption);
  font-weight: var(--rm-w-medium);
  color: var(--rm-text);
}

.rm-input,
.rm-select,
.rm-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  min-height: 48px;
  color: var(--rm-text);
  background: var(--rm-surface);
  border: var(--rm-bw-hair) solid var(--rm-border);
  border-radius: var(--rm-r-sm);
  font-size: var(--rm-fs-body-s);
  transition: border-color var(--rm-dur-fast) var(--rm-ease-out),
              background-color var(--rm-dur-fast) var(--rm-ease-out),
              box-shadow var(--rm-dur-fast) var(--rm-ease-out);
}
.rm-textarea { min-height: 128px; resize: vertical; line-height: var(--rm-lh-body); }

.rm-input::placeholder,
.rm-textarea::placeholder { color: var(--rm-text-subtle); }

.rm-input:hover,
.rm-select:hover,
.rm-textarea:hover { border-color: var(--rm-border-strong); }

.rm-input:focus,
.rm-select:focus,
.rm-textarea:focus {
  outline: none;
  border-color: var(--rm-accent);
  box-shadow: 0 0 0 3px var(--rm-accent-quiet);
  background: var(--rm-surface-hover);
}

.rm-select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.rm-field__hint { font-size: var(--rm-fs-caption); color: var(--rm-text-subtle); }
.rm-field__error { font-size: var(--rm-fs-caption); color: var(--rm-danger); font-weight: var(--rm-w-medium); }
.rm-field--invalid .rm-input,
.rm-field--invalid .rm-textarea,
.rm-field--invalid .rm-select {
  border-color: var(--rm-danger);
  border-width: var(--rm-bw-base);
  background: var(--rm-danger-quiet);
}
.rm-field--invalid .rm-input:focus,
.rm-field--invalid .rm-textarea:focus {
  border-color: var(--rm-danger);
  box-shadow: 0 0 0 3px var(--rm-danger-quiet);
}

/* Checkbox & radio */
.rm-check { display: inline-flex; align-items: flex-start; gap: var(--rm-sp-3); cursor: pointer; font-size: var(--rm-fs-body-s); }
.rm-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.rm-check__box {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  border: var(--rm-bw-base) solid var(--rm-border-strong);
  border-radius: var(--rm-r-xs);
  display: grid; place-items: center;
  transition: all var(--rm-dur-fast) var(--rm-ease-out);
}
.rm-check--radio .rm-check__box { border-radius: var(--rm-r-full); }
.rm-check__box::after {
  content: "";
  width: 10px; height: 10px;
  background: var(--rm-text-on-accent);
  transform: scale(0);
  transition: transform var(--rm-dur-fast) var(--rm-ease-out);
  clip-path: polygon(14% 52%, 0 66%, 39% 100%, 100% 22%, 86% 10%, 37% 71%);
}
.rm-check--radio .rm-check__box::after { clip-path: none; border-radius: var(--rm-r-full); width: 8px; height: 8px; }
.rm-check input:checked + .rm-check__box { background: var(--rm-accent); border-color: var(--rm-accent); }
.rm-check input:checked + .rm-check__box::after { transform: scale(1); }
.rm-check input:focus-visible + .rm-check__box { outline: var(--rm-bw-strong) solid var(--rm-focus); outline-offset: 3px; }

/* Switch */
.rm-switch { display: inline-flex; align-items: center; gap: var(--rm-sp-3); cursor: pointer; font-size: var(--rm-fs-body-s); }
.rm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rm-switch__track {
  width: 46px; height: 26px; flex: none;
  background: var(--rm-surface-hover);
  border: var(--rm-bw-hair) solid var(--rm-border-strong);
  border-radius: var(--rm-r-full);
  padding: 2px;
  transition: all var(--rm-dur-base) var(--rm-ease-out);
}
.rm-switch__thumb {
  display: block; width: 18px; height: 18px;
  background: var(--rm-text);
  border-radius: var(--rm-r-full);
  transition: transform var(--rm-dur-base) var(--rm-ease-out), background var(--rm-dur-base) var(--rm-ease-out);
}
.rm-switch input:checked + .rm-switch__track { background: var(--rm-accent); border-color: var(--rm-accent); }
.rm-switch input:checked + .rm-switch__track .rm-switch__thumb { transform: translateX(20px); background: var(--rm-text-on-accent); }
.rm-switch input:focus-visible + .rm-switch__track { outline: var(--rm-bw-strong) solid var(--rm-focus); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   09 · SUPERFÍCIES · CARDS
   -------------------------------------------------------------------------- */
.rm-card {
  background: var(--rm-surface);
  border: var(--rm-bw-hair) solid var(--rm-border);
  border-radius: var(--rm-r-md);
  padding: var(--rm-sp-5);
  transition: border-color var(--rm-dur-base) var(--rm-ease-out),
              background var(--rm-dur-base) var(--rm-ease-out),
              transform var(--rm-dur-base) var(--rm-ease-out);
}
.rm-card--interactive { cursor: pointer; }
.rm-card--interactive:hover {
  border-color: var(--rm-border-accent);
  background: var(--rm-surface-hover);
  transform: translateY(-3px);
}
.rm-card--accent {
  background: var(--rm-surface-accent);
  border-color: var(--rm-border-accent);
}
.rm-card--flat { background: transparent; }
.rm-card--sunken { background: var(--rm-surface-sunken); }

/* --------------------------------------------------------------------------
   10 · BADGES / TAGS / STATUS
   O sistema não possui matizes semânticas (verde/vermelho/amarelo).
   Status é comunicado por FORMA, PESO e ÍCONE — nunca por cor nova.
   -------------------------------------------------------------------------- */
.rm-badge {
  display: inline-flex; align-items: center; gap: var(--rm-sp-2);
  padding: 0.3125rem 0.625rem;
  font-size: var(--rm-fs-micro);
  font-weight: var(--rm-w-medium);
  letter-spacing: var(--rm-ls-wide);
  text-transform: uppercase;
  line-height: 1.3;
  border-radius: var(--rm-r-full);
  border: var(--rm-bw-hair) solid var(--rm-border);
  color: var(--rm-text-muted);
  white-space: nowrap;
}
.rm-badge--solid   { background: var(--rm-accent); border-color: var(--rm-accent); color: var(--rm-text-on-accent); }
.rm-badge--accent  { background: var(--rm-accent-quiet); border-color: var(--rm-border-accent); color: var(--rm-text-accent); }
.rm-badge--strong  { border-color: var(--rm-text); color: var(--rm-text); }
.rm-badge--square  { border-radius: var(--rm-r-xs); }
.rm-badge--danger  { background: var(--rm-danger-quiet); border-color: rgb(var(--rm-red-rgb) / 0.5); color: var(--rm-danger); }
.rm-badge--blue    { background: rgb(var(--rm-blue-rgb) / 0.16); border-color: rgb(var(--rm-blue-rgb) / 0.55); color: var(--rm-light); }
.rm-badge__dot { width: 6px; height: 6px; border-radius: var(--rm-r-full); background: currentColor; flex: none; }

/* Alertas */
.rm-alert {
  display: flex; gap: var(--rm-sp-3);
  padding: var(--rm-sp-4);
  border: var(--rm-bw-hair) solid var(--rm-border);
  border-left-width: var(--rm-bw-mega);
  border-left-color: var(--rm-text-subtle);
  border-radius: var(--rm-r-sm);
  background: var(--rm-surface);
  font-size: var(--rm-fs-body-s);
}
.rm-alert--info    { border-left-color: var(--rm-accent); background: var(--rm-surface-accent); }
.rm-alert--success { border-left-color: var(--rm-accent); }
.rm-alert--warning { border-left-color: var(--rm-mist); }
.rm-alert--danger  {
  border-left-color: var(--rm-danger);
  background: var(--rm-danger-quiet);
}
.rm-alert--danger .rm-alert__title { color: var(--rm-danger); }
.rm-alert__title { font-weight: var(--rm-w-semibold); color: var(--rm-text); display: block; margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   11 · NAVEGAÇÃO · TABS · BREADCRUMB
   -------------------------------------------------------------------------- */
.rm-tabs { display: flex; gap: var(--rm-sp-1); border-bottom: var(--rm-bw-hair) solid var(--rm-border); overflow-x: auto; scrollbar-width: none; }
.rm-tabs::-webkit-scrollbar { display: none; }
.rm-tab {
  padding: var(--rm-sp-3) var(--rm-sp-4);
  font-size: var(--rm-fs-body-s);
  font-weight: var(--rm-w-medium);
  color: var(--rm-text-subtle);
  background: none; border: 0; cursor: pointer;
  border-bottom: var(--rm-bw-strong) solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--rm-dur-fast) var(--rm-ease-out), border-color var(--rm-dur-fast) var(--rm-ease-out);
}
.rm-tab:hover { color: var(--rm-text); }
.rm-tab[aria-selected="true"] { color: var(--rm-text); border-bottom-color: var(--rm-accent); }

.rm-breadcrumb { display: flex; align-items: center; gap: var(--rm-sp-2); font-size: var(--rm-fs-caption); color: var(--rm-text-subtle); flex-wrap: wrap; }
.rm-breadcrumb a:hover { color: var(--rm-text); }
.rm-breadcrumb__sep { opacity: 0.5; }

/* --------------------------------------------------------------------------
   12 · TABELA
   -------------------------------------------------------------------------- */
.rm-table-wrap { overflow-x: auto; border: var(--rm-bw-hair) solid var(--rm-border); border-radius: var(--rm-r-md); }
.rm-table { font-size: var(--rm-fs-body-s); min-width: 520px; }
.rm-table th {
  text-align: left;
  padding: var(--rm-sp-3) var(--rm-sp-4);
  font-size: var(--rm-fs-micro);
  font-weight: var(--rm-w-medium);
  letter-spacing: var(--rm-ls-label);
  text-transform: uppercase;
  color: var(--rm-text-subtle);
  border-bottom: var(--rm-bw-hair) solid var(--rm-border);
  background: var(--rm-surface);
  white-space: nowrap;
}
.rm-table td { padding: var(--rm-sp-4); border-bottom: var(--rm-bw-hair) solid var(--rm-border-soft); vertical-align: middle; }
.rm-table tbody tr:last-child td { border-bottom: 0; }
.rm-table tbody tr { transition: background var(--rm-dur-fast) var(--rm-ease-out); }
.rm-table tbody tr:hover { background: var(--rm-surface); }

/* --------------------------------------------------------------------------
   13 · PROGRESSO · SKELETON · DIVISOR
   -------------------------------------------------------------------------- */
.rm-progress { height: 4px; background: var(--rm-surface-hover); border-radius: var(--rm-r-full); overflow: hidden; }
.rm-progress__bar { height: 100%; background: var(--rm-accent); border-radius: inherit; transition: width var(--rm-dur-slow) var(--rm-ease-out); }

.rm-skeleton {
  background: linear-gradient(90deg, var(--rm-surface) 0%, var(--rm-surface-hover) 50%, var(--rm-surface) 100%);
  background-size: 200% 100%;
  animation: rm-shimmer 1.4s linear infinite;
  border-radius: var(--rm-r-sm);
}
@keyframes rm-shimmer { to { background-position: -200% 0; } }

.rm-divider { height: var(--rm-bw-hair); background: var(--rm-border); border: 0; }
.rm-divider--diagonal {
  height: 8px; background: repeating-linear-gradient(var(--rm-angle),
    var(--rm-border) 0 1px, transparent 1px 7px);
}

/* --------------------------------------------------------------------------
   14 · TEXTURAS & MOTIVOS DA MARCA
   -------------------------------------------------------------------------- */

/* Malha de linhas — estrutura técnica de fundo */
.rm-mesh {
  background-image:
    linear-gradient(to right, var(--rm-border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rm-border-soft) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Hachura a 45° — eco direto dos cortes do símbolo RM */
.rm-hatch {
  background-image: repeating-linear-gradient(var(--rm-angle),
    var(--rm-border) 0 1px, transparent 1px 10px);
}

/* Halo do azul elétrico */
.rm-halo { position: relative; isolation: isolate; }
.rm-halo::before {
  content: "";
  position: absolute; inset: -20% -10%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--rm-blue-rgb) / 0.35), transparent 70%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

/* Grão — textura fotográfica sobre superfícies escuras */
.rm-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Corte diagonal — canto chanfrado a 45° */
.rm-chamfer { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.rm-chamfer-tr { clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }

/* --------------------------------------------------------------------------
   15 · ANIMAÇÕES DE ENTRADA
   -------------------------------------------------------------------------- */
@keyframes rm-rise    { from { opacity: 0; transform: translateY(30px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes rm-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-wipe    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rm-scale-in{ from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* A opacidade zero só é aplicada quando há JS para revelar de volta.
   Sem JS (ou se o observer falhar), o conteúdo permanece visível. */
.rm-js .rm-reveal { opacity: 0; }
.rm-js .rm-reveal.is-in { animation: rm-rise var(--rm-dur-reveal) var(--rm-ease-entry) forwards; }

/* Variantes de entrada */
@keyframes rm-slide-left  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes rm-slide-right { from { opacity: 0; transform: translateX(28px); }  to { opacity: 1; transform: none; } }
@keyframes rm-zoom        { from { opacity: 0; transform: scale(0.94); }       to { opacity: 1; transform: none; } }
@keyframes rm-unmask      { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 -12% 0); } }
@keyframes rm-grow-line   { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.rm-js .rm-reveal--left.is-in  { animation-name: rm-slide-left; }
.rm-js .rm-reveal--right.is-in { animation-name: rm-slide-right; }
.rm-js .rm-reveal--zoom.is-in  { animation-name: rm-zoom; }
.rm-js .rm-reveal--mask.is-in  { animation-name: rm-unmask; animation-duration: 900ms; }
/* Precisam vencer o shorthand `animation` de `.rm-reveal.is-in`, que
   por ser shorthand reseta o animation-delay para 0. */
.rm-js .rm-reveal.is-in[data-delay="1"] { animation-delay: 80ms; }
.rm-js .rm-reveal.is-in[data-delay="2"] { animation-delay: 160ms; }
.rm-js .rm-reveal.is-in[data-delay="3"] { animation-delay: 240ms; }
.rm-js .rm-reveal.is-in[data-delay="4"] { animation-delay: 320ms; }
.rm-js .rm-reveal.is-in[data-delay="5"] { animation-delay: 400ms; }
.rm-js .rm-reveal.is-in[data-delay="6"] { animation-delay: 480ms; }

/* --------------------------------------------------------------------------
   16 · UTILITÁRIOS
   -------------------------------------------------------------------------- */
.rm-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.rm-full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.rm-relative { position: relative; }
.rm-center { display: grid; place-items: center; }
.rm-text-center { text-align: center; }
.rm-nowrap { white-space: nowrap; }