@import url('https://fonts.cdnfonts.com/css/rawline');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(20, 14.3%, 4.1%);
  --muted: hsl(60, 4.8%, 95.9%);
  --muted-foreground: hsl(25, 5.3%, 44.7%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(20, 14.3%, 4.1%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(20, 14.3%, 4.1%);
  --border: hsl(20, 5.9%, 90%);
  --input: hsl(20, 5.9%, 90%);
  --primary: hsl(207, 90%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(60, 4.8%, 95.9%);
  --secondary-foreground: hsl(24, 9.8%, 10%);
  --accent: hsl(60, 4.8%, 95.9%);
  --accent-foreground: hsl(24, 9.8%, 10%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(60, 9.1%, 97.8%);
  --ring: hsl(20, 14.3%, 4.1%);
  --radius: 0.5rem;
  
  /* Custom SinPatinhas colors */
  --gov-blue: hsl(215, 54%, 23%);
  --gov-blue-light: hsl(217, 89%, 61%);
  --background-gray: hsl(210, 17%, 98%);
  
  /* Gov.br Design System Variables */
  --interactive: #1351B4;
  --interactive-light: #1351B4;
  --interactive-rgb: 19, 81, 180;
  --color-dark: #ffffff;
  --color-dark-rgb: 255, 255, 255;
  --gray-2: #f8f9fa;
  --spacing-scale-2x: 16px;
  --spacing-scale-3x: 24px;
  --spacing-scale-half: 4px;
  --font-size-scale-up-01: 16px;
  --font-weight-semi-bold: 600;
  --hover: 0.08;
  --pressed: 0.16;
  --focus: #FFD700;
  --focus-style: solid;
  --focus-width: 2px;
  --background-light: #ffffff;
  
  /* Font Awesome Icon Sizes - Government Design System */
  --icon-size-base: 16px;
  --icon-size-xs: 8px;
  --icon-size-sm: 12px;
  --icon-size-lg: 20px;
  --icon-size-2x: 32px;
  --icon-size-3x: 48px;
  --icon-size-4x: 64px;
  --icon-size-5x: 80px;
}

/* Desktop Layout Fixes */
@media (min-width: 1024px) {
  html, body {
    height: 100%;
  }
  
  .min-h-screen {
    height: 100vh;
    max-height: 100vh;
  }
}
  
  /* Elevation System - Government Design System */
  --surface-offset-none: 0px;
  --surface-offset-sm: 1px;
  --surface-offset-md: 3px;
  --surface-offset-lg: 6px;
  --surface-offset-xl: 9px;
  --surface-blur-lg: 6px;
  --surface-opacity-xs: 0.08;
  
  /* Spacing Scale - Government Design System */
  --spacing-scale-default: 0px;
  --spacing-scale-half: 4px;
  --spacing-scale-base: 8px;
  --spacing-scale-2x: 16px;
  --spacing-scale-3x: 24px;
  --spacing-scale-4x: 32px;
  --spacing-scale-5x: 40px;
  --spacing-scale-6x: 48px;
}

.dark {
  --background: hsl(240, 10%, 3.9%);
  --foreground: hsl(0, 0%, 98%);
  --muted: hsl(240, 3.7%, 15.9%);
  --muted-foreground: hsl(240, 5%, 64.9%);
  --popover: hsl(240, 10%, 3.9%);
  --popover-foreground: hsl(0, 0%, 98%);
  --card: hsl(240, 10%, 3.9%);
  --card-foreground: hsl(0, 0%, 98%);
  --border: hsl(240, 3.7%, 15.9%);
  --input: hsl(240, 3.7%, 15.9%);
  --primary: hsl(207, 90%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(240, 3.7%, 15.9%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --accent: hsl(240, 3.7%, 15.9%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --ring: hsl(240, 4.9%, 83.9%);
  --radius: 0.5rem;
}

/* Base Reset */
* {
  border-color: var(--border);
}

body {
  font-family: 'Rawline', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--background);
  color: var(--foreground);
  margin: 0;
  padding: 0;
}

/* Utility Classes - Exact React Match */
.geometric-pattern {
  background-image: radial-gradient(circle at 2px 2px, rgba(0,0,0,0.03) 1px, transparent 0);
  background-size: 30px 30px;
}

.mascot-shadow {
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

/* Gov.br Button Styles - Exact implementation */
.br-sign-in,
.br-button.sign-in {
  --button-radius: 100em;
  --button-xsmall: 24px;
  --button-small: 32px;
  --button-medium: 40px;
  --button-large: 48px;
  --button-size: var(--button-medium);
  --background: #f8f9fa;
  --sign-in-img: 20px;
  --interactive-rgb: 19, 81, 180;
  --hover: 0.08;
  --pressed: 0.16;
  --focus-offset: 4px;
  --focus: #2670e8;
  --focus-style: solid;
  --focus-width: 2px;
  --color-dark: #ffffff;
  --interactive-light: #1351B4;
  --spacing-scale-3x: 24px;
  --spacing-scale-2x: 16px;
  --font-size-scale-up-01: 16px;
  --font-weight-semi-bold: 600;
  
  align-items: center;
  background-color: transparent;
  border: 0;
  border-radius: var(--button-radius);
  color: var(--interactive);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--font-size-scale-up-01);
  font-weight: var(--font-weight-semi-bold);
  height: var(--button-size);
  justify-content: center;
  overflow: hidden;
  padding: 0 var(--spacing-scale-3x);
  position: relative;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  background-color: var(--background);
  padding: 0 var(--spacing-scale-2x);
}

.br-sign-in.large,
.br-button.sign-in.large {
  --button-size: var(--button-large);
}

.br-sign-in.primary,
.br-button.sign-in.primary {
  --interactive-rgb: 33, 37, 41;
  background-color: var(--interactive-light);
  color: var(--color-dark);
}

.br-sign-in:not(:disabled):hover,
.br-button.sign-in:not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}

.br-sign-in:not(:disabled):active,
.br-button.sign-in:not(:disabled):active {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}

.br-sign-in:focus,
.br-button.sign-in:focus {
  outline: none;
}

.br-sign-in:focus-visible,
.br-button.sign-in:focus-visible {
  outline-color: var(--focus);
  outline-offset: var(--focus-offset);
  outline-style: var(--focus-style);
  outline-width: var(--focus-width);
}

.text-black {
  color: #000000 !important;
}

.welcome-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Font Awesome Icon Size Utilities - Government Design System */
.icon-xs { font-size: var(--icon-size-xs); }
.icon-sm { font-size: var(--icon-size-sm); }
.icon-base { font-size: var(--icon-size-base); }
.icon-lg { font-size: var(--icon-size-lg); }
.icon-2x { font-size: var(--icon-size-2x); }
.icon-3x { font-size: var(--icon-size-3x); }
.icon-4x { font-size: var(--icon-size-4x); }
.icon-5x { font-size: var(--icon-size-5x); }

/* Elevation Utilities - Government Design System */
.elevation-0 {
  box-shadow: none;
  z-index: 0;
}

.elevation-1 {
  box-shadow: 0 var(--surface-offset-sm) var(--surface-blur-lg) rgba(255, 255, 255, var(--surface-opacity-xs));
  z-index: 10;
}

.elevation-2 {
  box-shadow: 0 var(--surface-offset-md) var(--surface-blur-lg) rgba(255, 255, 255, var(--surface-opacity-xs));
  z-index: 20;
}

/* Card Elevation - Layer 1 for Login Components */
.card-elevated {
  background: white;
  border-radius: 12px;
  box-shadow: 0 var(--surface-offset-sm) var(--surface-blur-lg) rgba(0, 0, 0, 0.1), 
              0 4px 20px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

/* Enhanced Container Shadow for Login Area */
.container-shadow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 
              0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
}

/* Responsive Utilities */
.min-h-screen {
  min-height: 100vh;
}

.bg-\[hsl\(210\,17\%\,98\%\)\] {
  background-color: hsl(210,17%,98%);
}

.lg\:hidden {
  display: block;
}

.hidden {
  display: none;
}

.w-full {
  width: 100%;
}

.pt-12 {
  padding-top: 3rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.items-end {
  align-items: flex-end;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.w-64 {
  width: 16rem;
}

.w-80 {
  width: 20rem;
}

.h-auto {
  height: auto;
}

.max-w-full {
  max-width: 100%;
}

.bg-white {
  background-color: white;
}

.min-h-\[60vh\] {
  min-height: 60vh;
}

.items-start {
  align-items: flex-start;
}

.pt-6 {
  padding-top: 1.5rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.max-w-sm {
  max-width: 24rem;
}

.text-center {
  text-align: center;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.font-semibold {
  font-weight: 600;
}

.text-gray-800 {
  color: #1f2937;
}

.bg-\[#0065e0\] {
  background-color: #0065e0;
}

.text-white {
  color: white;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.rounded-full {
  border-radius: 9999px;
}

.hover\:bg-\[#0056c7\]:hover {
  background-color: #0056c7;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.h-12 {
  height: 3rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.p-16 {
  padding: 4rem;
}

.bg-white {
  background-color: white;
}

.rounded-2xl {
  border-radius: 1rem;
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.overflow-hidden {
  overflow: hidden;
}

.max-w-5xl {
  max-width: 80rem;
}

.h-\[600px\] {
  height: 600px;
}

.grid {
  display: grid;
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.h-full {
  height: 100%;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.p-12 {
  padding: 3rem;
}

.p-8 {
  padding: 2rem;
}

/* Media Queries - Exact React Breakpoints */
@media (min-width: 1024px) {
  .lg\:hidden {
    display: none !important;
  }
  
  .lg\:flex {
    display: flex !important;
  }
  
  .lg\:mb-8 {
    margin-bottom: 2rem !important;
  }
  
  .lg\:w-80 {
    width: 20rem !important;
  }
  
  .lg\:h-auto {
    height: auto !important;
  }
}

/* Additional styling to match exact positioning */
button {
  font-family: inherit;
  cursor: pointer;
}

img {
  display: block;
  vertical-align: middle;
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: inherit;
}

p {
  margin: 0;
}