/* ============================================================================
   Enterprise Design System - Global Styles & CSS Variables
   ============================================================================ */

/* Base reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================================
   CSS Variables - Light Theme (Default)
   ============================================================================ */
:root {
  /* Primary Color Palette */
  --color-primary-50: 240 100% 98%;
  --color-primary-100: 212 75% 96%;
  --color-primary-200: 208 62% 94%;
  --color-primary-300: 206 50% 91%;
  --color-primary-400: 204 42% 87%;
  --color-primary-500: 202 35% 74%;
  --color-primary-600: 201 30% 66%;
  --color-primary-700: 199 26% 50%;
  --color-primary-800: 197 20% 34%;
  --color-primary-900: 196 15% 22%;
  --color-primary: var(--color-primary-500);

  /* Secondary Color Palette */
  --color-secondary-50: 180 100% 98%;
  --color-secondary-100: 177 100% 96%;
  --color-secondary-200: 176 100% 93%;
  --color-secondary-300: 174 100% 89%;
  --color-secondary-400: 171 100% 84%;
  --color-secondary-500: 171 100% 35%;
  --color-secondary-600: 169 100% 30%;
  --color-secondary-700: 167 100% 26%;
  --color-secondary-800: 164 100% 21%;
  --color-secondary-900: 162 100% 16%;
  --color-secondary: var(--color-secondary-500);

  /* Success Color Palette */
  --color-success-50: 141 100% 97%;
  --color-success-100: 141 100% 92%;
  --color-success-200: 141 100% 85%;
  --color-success-300: 141 100% 71%;
  --color-success-400: 141 100% 52%;
  --color-success-500: 161 60% 45%;
  --color-success-600: 161 100% 34%;
  --color-success-700: 161 100% 28%;
  --color-success-800: 161 80% 25%;
  --color-success-900: 161 60% 21%;
  --color-success: var(--color-success-500);

  /* Error Color Palette */
  --color-error-50: 0 100% 97%;
  --color-error-100: 0 100% 94%;
  --color-error-200: 0 100% 90%;
  --color-error-300: 0 100% 81%;
  --color-error-400: 0 100% 66%;
  --color-error-500: 0 71% 79%;
  --color-error-600: 0 80% 70%;
  --color-error-700: 0 100% 60%;
  --color-error-800: 0 100% 50%;
  --color-error-900: 0 100% 40%;
  --color-error: var(--color-error-500);

  /* Warning Color Palette */
  --color-warning-50: 40 100% 98%;
  --color-warning-100: 40 100% 95%;
  --color-warning-200: 40 100% 90%;
  --color-warning-300: 40 100% 84%;
  --color-warning-400: 40 100% 74%;
  --color-warning-500: 40 55% 85%;
  --color-warning-600: 40 71% 71%;
  --color-warning-700: 40 100% 58%;
  --color-warning-800: 40 100% 47%;
  --color-warning-900: 40 100% 27%;
  --color-warning: var(--color-warning-500);

  /* Info Color Palette */
  --color-info-50: 198 100% 97%;
  --color-info-100: 200 100% 94%;
  --color-info-200: 199 100% 88%;
  --color-info-300: 199 100% 75%;
  --color-info-400: 199 100% 56%;
  --color-info-500: 199 100% 32%;
  --color-info-600: 198 100% 27%;
  --color-info-700: 197 100% 22%;
  --color-info-800: 196 100% 18%;
  --color-info-900: 195 100% 14%;
  --color-info: var(--color-info-500);

  /* Neutral Color Palette */
  --color-neutral-50: 25 16% 98%;
  --color-neutral-100: 25 11% 96%;
  --color-neutral-200: 25 8% 91%;
  --color-neutral-300: 25 6% 84%;
  --color-neutral-400: 25 5% 66%;
  --color-neutral-500: 25 4% 47%;
  --color-neutral-600: 25 5% 34%;
  --color-neutral-700: 25 6% 25%;
  --color-neutral-800: 25 8% 16%;
  --color-neutral-900: 25 11% 11%;
  --color-neutral: var(--color-neutral-500);

  /* Background Colors */
  --color-background: 0 0% 100%;
  --color-background-secondary: 25 16% 98%;
  --color-background-tertiary: 25 11% 96%;

  /* Text Colors */
  --color-text: 25 5% 34%;
  --color-text-secondary: 25 4% 47%;
  --color-text-tertiary: 25 5% 66%;

  /* Legacy colors for backward compatibility */
  --color-blue-white-background: #5dade2;
  --color-text-grafite: #2f2f2f;
  --color-text-blue: #438cbd;
  --color-dark-blue-background: #00000080;
  --color-text-white: #ececec;
  --widt-center-screen: 70%;

  /* Typography */
  --font-family-heading: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  --font-family-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'Courier New', 'Courier', monospace;

  /* Spacing Base Unit */
  --spacing-base: 4px;

  /* Transitions */
  --transition-fast: all 100ms cubic-bezier(0, 0, 0.2, 1);
  --transition-base: all 200ms cubic-bezier(0, 0, 0.2, 1);
  --transition-slow: all 300ms cubic-bezier(0, 0, 0.2, 1);

  /* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    --transition-fast: none;
    --transition-base: none;
    --transition-slow: none;
  }
}

/* ============================================================================
   CSS Variables - Dark Theme
   ============================================================================ */
html.dark {
  /* Primary Color Palette - Dark Theme */
  --color-primary-50: 240 100% 98%;
  --color-primary-100: 212 75% 96%;
  --color-primary-200: 208 62% 94%;
  --color-primary-300: 206 50% 91%;
  --color-primary-400: 204 42% 87%;
  --color-primary-500: 211 100% 55%;
  --color-primary-600: 210 100% 45%;
  --color-primary-700: 209 100% 38%;
  --color-primary-800: 208 100% 31%;
  --color-primary-900: 207 100% 25%;
  --color-primary: var(--color-primary-500);

  /* Secondary Color Palette - Dark Theme */
  --color-secondary-50: 180 100% 98%;
  --color-secondary-100: 180 100% 95%;
  --color-secondary-200: 180 100% 90%;
  --color-secondary-300: 180 100% 85%;
  --color-secondary-400: 180 100% 80%;
  --color-secondary-500: 180 100% 52%;
  --color-secondary-600: 179 100% 42%;
  --color-secondary-700: 178 100% 35%;
  --color-secondary-800: 177 100% 27%;
  --color-secondary-900: 176 100% 22%;
  --color-secondary: var(--color-secondary-500);

  /* Success Color Palette - Dark Theme */
  --color-success-50: 141 100% 97%;
  --color-success-100: 141 100% 92%;
  --color-success-200: 141 100% 85%;
  --color-success-300: 141 100% 71%;
  --color-success-400: 141 100% 58%;
  --color-success-500: 160 84% 61%;
  --color-success-600: 161 65% 45%;
  --color-success-700: 161 100% 34%;
  --color-success-800: 161 100% 28%;
  --color-success-900: 161 80% 25%;
  --color-success: var(--color-success-500);

  /* Error Color Palette - Dark Theme */
  --color-error-50: 0 100% 97%;
  --color-error-100: 0 100% 94%;
  --color-error-200: 0 100% 90%;
  --color-error-300: 0 100% 81%;
  --color-error-400: 0 100% 66%;
  --color-error-500: 0 100% 68%;
  --color-error-600: 0 93% 60%;
  --color-error-700: 0 100% 53%;
  --color-error-800: 0 100% 40%;
  --color-error-900: 0 100% 25%;
  --color-error: var(--color-error-500);

  /* Warning Color Palette - Dark Theme */
  --color-warning-50: 40 100% 98%;
  --color-warning-100: 40 100% 95%;
  --color-warning-200: 40 100% 90%;
  --color-warning-300: 40 100% 84%;
  --color-warning-400: 40 100% 74%;
  --color-warning-500: 38 92% 61%;
  --color-warning-600: 40 71% 55%;
  --color-warning-700: 40 100% 53%;
  --color-warning-800: 40 100% 47%;
  --color-warning-900: 40 100% 27%;
  --color-warning: var(--color-warning-500);

  /* Info Color Palette - Dark Theme */
  --color-info-50: 198 100% 97%;
  --color-info-100: 200 100% 94%;
  --color-info-200: 199 100% 88%;
  --color-info-300: 199 100% 75%;
  --color-info-400: 199 100% 56%;
  --color-info-500: 198 100% 52%;
  --color-info-600: 197 100% 42%;
  --color-info-700: 196 100% 35%;
  --color-info-800: 195 100% 27%;
  --color-info-900: 194 100% 20%;
  --color-info: var(--color-info-500);

  /* Neutral Color Palette - Dark Theme */
  --color-neutral-50: 217 9% 6%;
  --color-neutral-100: 220 10% 10%;
  --color-neutral-200: 219 10% 16%;
  --color-neutral-300: 218 10% 25%;
  --color-neutral-400: 217 10% 34%;
  --color-neutral-500: 216 10% 47%;
  --color-neutral-600: 216 8% 66%;
  --color-neutral-700: 216 6% 84%;
  --color-neutral-800: 216 8% 91%;
  --color-neutral-900: 216 11% 96%;
  --color-neutral: var(--color-neutral-500);

  /* Background Colors - Dark Theme */
  --color-background: 217 10% 8%;
  --color-background-secondary: 220 10% 10%;
  --color-background-tertiary: 219 10% 16%;

  /* Text Colors - Dark Theme */
  --color-text: 216 6% 84%;
  --color-text-secondary: 216 8% 66%;
  --color-text-tertiary: 217 10% 50%;
}

/* ============================================================================
   Global Styles
   ============================================================================ */

html {
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  font-family: var(--font-family-body);
  color: hsl(var(--color-text));
  background-color: hsl(var(--color-background));
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
  background: linear-gradient(
    180deg,
    #f4fbff 6.21%,
    rgba(93, 173, 226, 0) 198.58%
  );
}

html.dark body {
  background: hsl(var(--color-background));
}

/* Typography Elements */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  color: hsl(var(--color-text));
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 3rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.25rem;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.875rem;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1.125rem;
}

/* Paragraph and text elements */
p {
  margin-bottom: 1rem;
}

small {
  font-size: 0.875rem;
  color: hsl(var(--color-text-secondary));
}

/* Links */
a {
  color: hsl(var(--color-primary));
  text-decoration: none;
  transition: var(--transition-base);
}

a:hover {
  color: hsl(var(--color-primary-600));
  text-decoration: underline;
}

a:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px hsl(var(--color-background)), 0 0 0 4px hsl(var(--color-primary));
}

/* Code elements */
code,
pre {
  font-family: var(--font-family-mono);
  background-color: hsl(var(--color-background-secondary));
  border-radius: 0.5rem;
}

code {
  padding: 0.25rem 0.5rem;
  color: hsl(var(--color-error));
  font-size: 0.875rem;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  background-color: hsl(var(--color-neutral-900));
  color: hsl(var(--color-neutral-50));
}

pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

/* Lists */
ul,
ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.5rem;
}

/* Blockquote */
blockquote {
  border-left: 4px solid hsl(var(--color-primary));
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 1rem;
  color: hsl(var(--color-text-secondary));
  font-style: italic;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid hsl(var(--color-neutral-200));
  margin: 2rem 0;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

th,
td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid hsl(var(--color-neutral-200));
}

th {
  font-weight: 600;
  background-color: hsl(var(--color-background-secondary));
}

tbody tr:hover {
  background-color: hsl(var(--color-background-secondary));
}

/* Form elements */
input,
textarea,
select {
  font-family: var(--font-family-body);
  font-size: 1rem;
  color: hsl(var(--color-text));
  background-color: hsl(var(--color-background));
  border: 1px solid hsl(var(--color-neutral-300));
  border-radius: 0.5rem;
  padding: 0.75rem;
  transition: var(--transition-base);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: hsl(var(--color-primary));
  box-shadow: 0 0 0 3px hsl(var(--color-primary) / 0.1);
}

textarea {
  resize: vertical;
}

button {
  font-family: var(--font-family-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: hsl(var(--color-primary));
  color: white;
  transition: var(--transition-base);
}

button:hover {
  background-color: hsl(var(--color-primary-600));
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--color-background)), 0 0 0 6px hsl(var(--color-primary));
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Utility classes from old global.css */
.copy {
  display: flex;
  position: relative;
}

.labelCopy {
  display: none;
  position: absolute;
  right: -0.5rem;
  top: -2.5rem;
  align-items: center;
  justify-content: center;
  color: whitesmoke;
  font-weight: 700;
  background-color: green;
  border-radius: 10px;
  padding: 5px;
}

.errorGit {
  display: none;
}

.infoActive {
  transform: scale(1.2);
  border-bottom: 2px solid var(--color-text-grafite);
}

/* Accessibility: Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: hsl(var(--color-primary));
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-to-main:focus {
  top: 0;
}

/* Focus visible for better accessibility */
:focus-visible {
  outline: 2px solid hsl(var(--color-primary));
  outline-offset: 2px;
}

/* Print styles */
@media print {
  html {
    background-color: white;
  }

  body {
    background-color: white;
    color: black;
  }

  a {
    text-decoration: underline;
  }

  button,
  input,
  textarea,
  select {
    display: none;
  }
}