/* ============================================================
   raw/assets/css/main.css
   ------------------------------------------------------------
   Estilos base de Raw — design tokens, reset y tipografía.
   Este archivo se importa en TODAS las páginas.

   Estructura:
   1. Design tokens (variables CSS)
   2. Modern CSS Reset (Andy Bell, adaptado)
   3. Tipografía base
   4. Utilidades de layout comunes
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ════════════════════════════════════════════════════════════
   Cambiando estos valores se actualiza Raw entero.
   Cuando agreguemos light mode, solo cambiamos los valores
   de las variables "semánticas" (--bg, --text, etc).
   ════════════════════════════════════════════════════════════ */

:root {

  /* --- Paleta cruda ---------------------------------------------
     Valores absolutos. NO usar directamente en componentes;
     siempre usar las variables semánticas de abajo.
  --------------------------------------------------------------- */
  --navy-900: #08111F;
  --navy-800: #0D1A2D;
  --navy-700: #142339;
  --navy-600: #1A2E48;
  --navy-500: #1F3354;
  --navy-400: #2A4366;
  --navy-300: #3A4E6B;
  --navy-200: #6F829A;
  --navy-100: #C4CDDA;
  --navy-50:  #F2EDE3;

  --orange-700: #C44A00;
  --orange-600: #E25400;
  --orange-500: #FF5F00;   /* ← naranja principal */
  --orange-400: #FF7820;
  --orange-300: #FFB57A;
  --orange-50:  rgba(255, 95, 0, 0.08);

  --white:      #FFFFFF;
  --black:      #000000;


  /* --- Variables semánticas (modo oscuro por defecto) -----------
     Estas son las que usás en los componentes.
     Cuando llegue light mode, solo cambiamos estos valores
     dentro de [data-theme="light"].
  --------------------------------------------------------------- */
  --bg:           var(--navy-900);   /* fondo principal */
  --bg-elevated:  var(--navy-800);   /* cards, paneles */
  --bg-raised:    var(--navy-700);   /* hover de cards */
  --bg-overlay:   var(--navy-600);   /* modales, dropdowns */

  --border:       var(--navy-500);   /* bordes sutiles */
  --border-bold:  var(--navy-400);   /* bordes con más presencia */

  --text:         var(--navy-50);    /* texto principal */
  --text-muted:   var(--navy-100);   /* texto secundario */
  --text-faint:   var(--navy-200);   /* texto desactivado, hints */
  --text-ghost:   var(--navy-300);   /* casi invisible */

  --accent:       var(--orange-500); /* color de marca */
  --accent-hover: var(--orange-400);
  --accent-dim:   var(--orange-50);  /* fondo sutil con tinte naranja */
  --accent-text:  var(--white);      /* texto sobre fondo accent */


  /* --- Tipografía (familias) ----------------------------------- */
  --font-display: 'Unbounded', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-accent:  'Bricolage Grotesque', sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;


  /* --- Tipografía (tamaños) ----------------------------------- */
  --text-xs:   11px;   /* mono, labels chiquitos */
  --text-sm:   13px;   /* UI secundario, captions */
  --text-base: 15px;   /* body por defecto */
  --text-lg:   17px;   /* intro, lead paragraphs */
  --text-xl:   22px;   /* subheadings */
  --text-2xl:  32px;   /* headings */
  --text-3xl:  48px;   /* display chico */
  --text-4xl:  72px;   /* display grande */
  --text-5xl:  112px;  /* hero monumental */


  /* --- Tipografía (pesos) ------------------------------------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;


  /* --- Espaciado (escala base 4px) ---------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;


  /* --- Breakpoints (referencia) ------------------------------- */
  /* CSS no puede usar variables dentro de @media,
     así que estos valores los repetimos en las media queries.
     Pero los anotamos acá como referencia única de verdad. */
  /*
     --bp-mobile:  600px
     --bp-tablet:  1024px
  */


  /* --- Layout ------------------------------------------------- */
  --container-max: 1200px;
  --container-padding: var(--space-10);

  /* --- Border radius (Kodeval family resemblance) ------------- */
  --radius-sm: 2px;   /* badges, tags chiquitos */
  --radius:    4px;   /* default: botones, cards, avatar, inputs */
  --radius-lg: 8px;   /* modales, contenedores grandes */


  /* --- Otros -------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --z-header:  100;
  --z-overlay: 500;
  --z-modal:   1000;
}


/* ════════════════════════════════════════════════════════════
   2. MODERN CSS RESET (Andy Bell, adaptado)
   ════════════════════════════════════════════════════════════
   Resetea comportamientos raros del navegador para tener
   una base consistente. Esto es lo que hacen los profesionales
   en lugar de pelearse con los defaults de cada navegador.
   ════════════════════════════════════════════════════════════ */

/* Box sizing predecible para todo */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reset de márgenes y paddings */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remover viñetas de listas que tengan rol explícito */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

/* Mejorar rendering de texto */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* Body: setup base */
body {
  min-height: 100vh;
  line-height: 1.55;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

/* Headings: line-height más apretado */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  font-family: var(--font-display);
}

/* Texto largo: balance para mejor lectura */
h1, h2, h3, h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Links: heredan color por defecto, sin underline */
a {
  color: inherit;
  text-decoration: none;
}

/* Imágenes responsive por defecto */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Forms: heredan tipografía */
input,
button,
textarea,
select {
  font: inherit;
}

/* Botones: sin estilos por defecto raros */
button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* Targets de scroll-snap o anchors no quedan tapados por header sticky */
:target {
  scroll-margin-block: 5ex;
}

/* Reduce motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════
   3. UTILIDADES DE LAYOUT
   ════════════════════════════════════════════════════════════
   Clases reutilizables para layouts comunes.
   Las usás en cualquier página sin tener que reescribir.
   ════════════════════════════════════════════════════════════ */

/* Contenedor centrado con ancho máximo */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Visually hidden — para accesibilidad (screen readers lo leen, no se ve) */
.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;
}


/* ════════════════════════════════════════════════════════════
   4. AJUSTES RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --container-padding: var(--space-6);
  }
}

/* Mobile */
@media (max-width: 600px) {
  :root {
    --container-padding: var(--space-4);
    --text-5xl: 56px;   /* hero más chico en mobile */
    --text-4xl: 48px;
    --text-3xl: 36px;
    --text-2xl: 24px;
  }
}