/*
  MARÉ — Sistema Tipográfico Central.
  Alinhado rigorosamente à escala, hierarquia e proporções dos protótipos canônicos
  (docs/prototipos/assets/prototype.css, layout-sidebar-grid.css e ocean-identity.css).
*/
:root {
  --font-family-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-display: var(--font-family-primary);

  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-label: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 26px;
  --font-size-4xl: 30px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-display: 750;

  --line-height-tight: 1.15;
  --line-height-heading: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight: -.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: .06em;
}

html {
  font-size: 100%;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base); /* 14px canônico do protótipo */
  line-height: var(--line-height-normal);
  color: var(--ink, #172536);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-display);
  color: var(--deep-space-blue, #06253d);
}

h1 {
  font-size: clamp(24px, 2.5vw, 30px);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
}

h2 {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.01em;
}

h3 {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

h4 {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

main:not(.auth) > header h1,
main:not(.auth) .page-header h1,
main:not(.auth) .development-header h1,
main:not(.auth) .evaluator-development-header h1 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: var(--line-height-heading);
}

p,
li {
  line-height: var(--line-height-normal);
  font-size: 14px;
}

.muted,
.help,
.empty,
.auth-flow-copy,
.auth-confirmation-copy,
.prototype-label {
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

small:not(#app-sidebar small) {
  font-size: 12px;
}

.eyebrow,
.nav-section > span,
.profile-data dt,
.evaluation-context dt,
.cycle-assignment-heading dt,
.user-detail-data dt,
.user-scopes > span,
.development-detail-section h4,
.development-validation-form h4 {
  font-size: 10px !important;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

form label,
.grid-form label,
.manual-form label,
.access-request-form label,
.cycle-controls label,
.assignment-search,
.operational-field > label,
.development-evidence-submit label,
.development-validation-form label,
.development-update-form label {
  font-size: 12px !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1.35;
  letter-spacing: var(--letter-spacing-normal);
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 13px !important;
  font-weight: var(--font-weight-regular);
  line-height: 1.45;
  min-height: 38px;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: 0 !important;
  padding: 0 !important;
  line-height: normal;
}

input::placeholder,
textarea::placeholder {
  color: var(--lavender-grey, #848fa5);
  font-size: inherit;
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

button,
.button {
  font-family: inherit;
  min-height: 38px;
  font-size: 13px !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1.25;
  letter-spacing: var(--letter-spacing-normal);
}

.compact-button,
.password-toggle,
.app-nav-toggle,
.chart-segmented button,
.pairs-segmented button,
.development-card-details > summary,
.development-history summary {
  min-height: 32px;
  font-size: 12px !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1.25;
}

main a:not(.button),
.back-link,
.mare-flow-back,
.auth-links a {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
}

table {
  font-size: 13px;
  line-height: 1.48;
}

th {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #536174);
}

td {
  font-size: 13px;
  line-height: 1.48;
}

th,
td {
  padding-top: 10px;
  padding-bottom: 10px;
}

td,
th,
.score-badge,
.model-history-score,
.notification-date {
  font-variant-numeric: tabular-nums;
}

.status-badge,
.development-status,
.access-request-status,
.audit-code,
.audit-result,
.type-badge,
.count-badge,
.coverage-tag,
.req-tag,
.tag-qualif,
.development-evidence-indicator,
.app-notifications b {
  font-size: 11px !important;
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--letter-spacing-normal);
}

.development-card h3,
.development-expandable-card .development-card-top h3,
.import-card h3,
.qualification-card b {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.32;
}

.development-card-snapshot > div > span {
  font-size: 12px !important;
}

.development-card-snapshot b,
.development-evidence-preview p,
.development-detail-section p {
  font-size: 13px;
  line-height: 1.5;
}

.development-expandable-card footer,
.development-history p,
.development-history li {
  font-size: 12px;
  line-height: 1.5;
}

.likert-five span {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}

.likert-five small {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.flash {
  font-size: 13px;
  line-height: 1.45;
}

.empty {
  font-size: 13px;
  line-height: var(--line-height-normal);
}

.audit-table td,
.audit-description-cell,
.notification-message small,
.notification-message strong {
  font-size: 12px;
  line-height: 1.45;
}

svg text,
.radar-label,
.radar-value,
.monthly-axis {
  font-family: var(--font-family-primary);
}

.radar-label,
.radar-value,
.monthly-axis {
  font-size: 11px;
}

.radar-label,
.monthly-axis {
  font-weight: var(--font-weight-semibold);
}

.radar-value {
  font-weight: var(--font-weight-bold);
}

.radar-key,
.monthly-chart-key,
.matrix-key,
.dispersion-row {
  font-size: 11px;
}

.mare-login-copy h1,
.welcome-home h1,
.welcome-presentation h2 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-display);
  line-height: 1.08;
  letter-spacing: var(--letter-spacing-tight);
}

.auth-card h1,
.login:not(.mare-login) h1 {
  font-size: clamp(26px, 3vw, 32px);
}

.mare-login-copy p,
.welcome-summary {
  font-size: 16px;
  line-height: var(--line-height-relaxed);
}

.panel p:not(.eyebrow),
.import-card p,
.development-card-details-content > p,
.auth-heading > p:not(.eyebrow) {
  font-size: 14px;
  line-height: var(--line-height-normal);
}

.cards article > span,
.cards article > small,
.metric small,
.profile-metrics span,
.qualification-card small {
  font-size: 12px !important;
}

/* ==========================================================================
   Sidebar Canônica MARÉ — Escala de navegação alinhada com protótipos
   (docs/prototipos/assets/layout-sidebar-grid.css e profile-navigation.css)
   ========================================================================== */
#app-sidebar,
#app-sidebar * {
  box-sizing: border-box;
}

#app-sidebar .brand {
  font-size: 20px !important;
  font-weight: 750 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
}

#app-sidebar .brand small,
#app-sidebar .brand-name small {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  color: #bbcad2 !important;
}

#app-sidebar .nav-group summary,
#app-sidebar .sidebar-group summary {
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #9eb4c1 !important;
}

#app-sidebar .group-caret {
  font-size: 12px !important;
  color: #9eb4c1 !important;
}

/* Links internos de cada grupo (submenus) */
#app-sidebar .nav-group-links a,
#app-sidebar .sidebar-group > div a {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #dce6ec !important;
}

#app-sidebar .nav-group-links a.is-active,
#app-sidebar .sidebar-group > div a.is-active {
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* Links de nível raiz (Visão do sistema, Visão do dia) — padronizados com os resumos de grupo */
#app-sidebar nav > .sidebar-link,
#app-sidebar .sidebar-navigation > a {
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #9eb4c1 !important;
}

#app-sidebar nav > .sidebar-link .nav-label,
#app-sidebar .sidebar-navigation > a .nav-label {
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-weight: 650 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

#app-sidebar nav > .sidebar-link.is-active,
#app-sidebar .sidebar-navigation > a.is-active {
  font-weight: 650 !important;
  color: #ffffff !important;
}

#app-sidebar .nav-label {
  font-size: 12px !important;
}

#app-sidebar .sidebar-avatar {
  font-size: 11px !important;
  font-weight: 600 !important;
}

#app-sidebar .sidebar-profile-copy strong {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

#app-sidebar .sidebar-profile-copy small,
#app-sidebar .profile-section small {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: #9eb4c1 !important;
}

#app-sidebar .profile-links a {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #dce6ec !important;
}

@media (max-width: 700px) {
  main:not(.auth) > header h1,
  main:not(.auth) .page-header h1,
  main:not(.auth) .development-header h1,
  main:not(.auth) .evaluator-development-header h1 {
    font-size: clamp(22px, 6vw, 26px);
  }
  h2 { font-size: 15px; }
  h3 { font-size: 13px; }
  input,
  select {
    font-size: 16px !important; /* Previne auto-zoom no iOS Safari */
    min-height: 44px;
  }
}