/**
 * ============================================================================
 * SIGL - TYPOGRAPHY SYSTEM
 * Sistema Integrado de Gestão Legislativa
 * ============================================================================
 * 
 * Sistema de tipografia unificado.
 * Define estilos base para todos os elementos de texto.
 * 
 * IMPORTANTE: Este arquivo deve ser carregado no início do CSS
 * para estabelecer os padrões tipográficos globais.
 * 
 * Autor: IntGest
 * Versão: 1.0.0
 * Data: 2025-12-14
 * ============================================================================
 */

/* =============================================================================
   FONT FACE - Poppins (Primary Font)
   ============================================================================= */

/* Carrega Poppins do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');

/* Fallback local se existir */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Poppins Light'), local('Poppins-Light');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Poppins Regular'), local('Poppins-Regular');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Poppins Medium'), local('Poppins-Medium');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Poppins SemiBold'), local('Poppins-SemiBold');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Poppins Bold'), local('Poppins-Bold');
}

/* =============================================================================
   BASE TYPOGRAPHY
   ============================================================================= */

html {
  font-size: 16px; /* Base para rem */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

/* =============================================================================
   HEADINGS
   ============================================================================= */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: var(--spacing-3);
}

h1, .h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

h2, .h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
}

h3, .h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

h4, .h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

h5, .h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

h6, .h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

/* Responsive headings */
@media (max-width: 767px) {
  h1, .h1 { font-size: var(--font-size-3xl); }
  h2, .h2 { font-size: var(--font-size-2xl); }
  h3, .h3 { font-size: var(--font-size-xl); }
  h4, .h4 { font-size: var(--font-size-lg); }
}

/* =============================================================================
   PARAGRAPHS & BODY TEXT
   ============================================================================= */

p {
  margin-top: 0;
  margin-bottom: var(--spacing-4);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

/* Lead paragraph (destaque) */
.lead {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

/* Small text */
small,
.small {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

/* Tiny text */
.tiny {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

/* =============================================================================
   INLINE TEXT ELEMENTS
   ============================================================================= */

/* Bold */
b, strong {
  font-weight: var(--font-weight-semibold);
}

/* Italic */
i, em {
  font-style: italic;
}

/* Underline */
u {
  text-decoration: underline;
  text-decoration-color: var(--color-primary-300);
  text-underline-offset: 2px;
}

/* Strikethrough */
s, del {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* Inserted text */
ins {
  text-decoration: none;
  background-color: var(--color-success-100);
  padding: 0 var(--spacing-1);
}

/* Mark/Highlight */
mark,
.mark {
  background-color: var(--color-warning-200);
  padding: 0 var(--spacing-1);
  border-radius: var(--radius-sm);
}

/* Abbr (abbreviation) */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: none;
}

/* =============================================================================
   LINKS
   ============================================================================= */

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-150) var(--ease-in-out);
}

/* a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
} */

a:focus {
  outline: 2px solid var(--color-primary-300);
  outline-offset: 2px;
}

/* Link without underline on hover */
a.link-plain:hover {
  text-decoration: none;
}

/* External link indicator */
a[target="_blank"]::after {
  content: '';
  /* Remove o ícone automático - use FontAwesome se necessário */
}

/* =============================================================================
   LISTS
   ============================================================================= */

ul, ol {
  margin-top: 0;
  margin-bottom: var(--spacing-4);
  padding-left: var(--spacing-6);
}

ul ul, ul ol,
ol ul, ol ol {
  margin-bottom: 0;
}

li {
  margin-bottom: var(--spacing-2);
  line-height: var(--line-height-relaxed);
}

li:last-child {
  margin-bottom: 0;
}

/* Unstyled list */
.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-unstyled li {
  margin-bottom: var(--spacing-2);
}

/* Inline list */
.list-inline {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.list-inline li {
  margin-bottom: 0;
}

/* Check list */
.list-check {
  padding-left: 0;
  list-style: none;
}

.list-check li {
  position: relative;
  padding-left: var(--spacing-6);
}

.list-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

/* Description list */
dl {
  margin-top: 0;
  margin-bottom: var(--spacing-4);
}

dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-1);
}

dd {
  margin-left: 0;
  margin-bottom: var(--spacing-3);
  color: var(--color-text-secondary);
}

/* =============================================================================
   BLOCKQUOTES
   ============================================================================= */

blockquote {
  margin: 0 0 var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-bg-secondary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

blockquote p {
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-2);
}

blockquote p:last-of-type {
  margin-bottom: 0;
}

blockquote footer,
blockquote cite {
  display: block;
  font-size: var(--font-size-sm);
  font-style: normal;
  color: var(--color-text-muted);
  margin-top: var(--spacing-2);
}

blockquote footer::before,
blockquote cite::before {
  content: '— ';
}

/* =============================================================================
   CODE & PREFORMATTED TEXT
   ============================================================================= */

code, kbd, samp, pre {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

/* Inline code */
code {
  padding: var(--spacing-0-5) var(--spacing-1-5);
  background-color: var(--color-neutral-100);
  color: var(--color-danger-600);
  border-radius: var(--radius-md);
  font-size: 0.875em;
}

/* Code inside pre */
pre code {
  padding: 0;
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  border-radius: 0;
}

/* Preformatted block */
pre {
  display: block;
  margin-top: 0;
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-4);
  overflow: auto;
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  line-height: var(--line-height-relaxed);
}

/* Keyboard input */
kbd {
  padding: var(--spacing-0-5) var(--spacing-1-5);
  background-color: var(--color-neutral-800);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* =============================================================================
   HORIZONTAL RULE
   ============================================================================= */

hr {
  margin: var(--spacing-6) 0;
  border: 0;
  border-top: 1px solid var(--color-border-light);
}

hr.hr-thick {
  border-top-width: 2px;
}

hr.hr-dashed {
  border-top-style: dashed;
}

hr.hr-dotted {
  border-top-style: dotted;
}

/* =============================================================================
   TEXT ALIGNMENT UTILITIES
   ============================================================================= */

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Responsive text alignment */
@media (min-width: 640px) {
  .sm\:text-left { text-align: left !important; }
  .sm\:text-center { text-align: center !important; }
  .sm\:text-right { text-align: right !important; }
}

@media (min-width: 768px) {
  .md\:text-left { text-align: left !important; }
  .md\:text-center { text-align: center !important; }
  .md\:text-right { text-align: right !important; }
}

@media (min-width: 1024px) {
  .lg\:text-left { text-align: left !important; }
  .lg\:text-center { text-align: center !important; }
  .lg\:text-right { text-align: right !important; }
}

/* =============================================================================
   TEXT TRANSFORM UTILITIES
   ============================================================================= */

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-normal-case { text-transform: none !important; }

/* =============================================================================
   TEXT DECORATION UTILITIES
   ============================================================================= */

.text-underline { text-decoration: underline !important; }
.text-line-through { text-decoration: line-through !important; }
.text-no-underline { text-decoration: none !important; }

/* =============================================================================
   FONT WEIGHT UTILITIES
   ============================================================================= */

.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* =============================================================================
   FONT SIZE UTILITIES
   ============================================================================= */

.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }
.text-6xl { font-size: var(--font-size-6xl) !important; }

/* =============================================================================
   LINE HEIGHT UTILITIES
   ============================================================================= */

.leading-none { line-height: var(--line-height-none) !important; }
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-snug { line-height: var(--line-height-snug) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }
.leading-loose { line-height: var(--line-height-loose) !important; }

/* =============================================================================
   LETTER SPACING UTILITIES
   ============================================================================= */

.tracking-tighter { letter-spacing: var(--letter-spacing-tighter) !important; }
.tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; }
.tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; }
.tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; }
.tracking-wider { letter-spacing: var(--letter-spacing-wider) !important; }
.tracking-widest { letter-spacing: var(--letter-spacing-widest) !important; }

/* =============================================================================
   TEXT OVERFLOW UTILITIES
   ============================================================================= */

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-wrap {
  white-space: normal !important;
}

/* Line clamp (multi-line truncation) */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================================================
   SELECTION STYLING
   ============================================================================= */

::selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-900);
}

::-moz-selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-900);
}