/* 
 * EstudioTime — Design System (SB5 Style)
 * Minimalismo radical, oscuridad, tipografía protagonista
 */

@font-face {
  font-family: 'Manrope';
  src: url('./fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Fondos ─────────────────────────────────── */
  --bg-app:         #0f0f0f;   /* negro principal */
  --bg-surface:     #1a1a1a;   /* superficie elevada sutil */
  --bg-card:        #222222;   /* tarjeta / panel */
  --bg-input:       #1e1e1e;   /* fondo de inputs */
  --bg-hover:       rgba(255,255,255,0.04); /* hover sutil */

  /* ── Texto ──────────────────────────────────── */
  --text-primary:   #f9f9f9;   /* blanco casi puro */
  --text-secondary: #B7B7B7;   /* gris claro */
  --text-muted:     #909090;   /* gris medio */
  --text-disabled:  #555555;

  /* ── Acentos SB5 (paleta tierra) ────────────── */
  --accent-warm:    #5F584F;   /* tostado/oliva cálido */
  --accent-brown:   #6D533C;   /* marrón medio */
  --accent-terra:   #973C20;   /* terracota (el más vibrante) */
  --accent-forest:  #4D5B48;   /* verde bosque oscuro */
  --accent-teal:    #4F5959;   /* gris azulado verdoso */
  --accent-grey:    #909090;   /* gris neutro */

  --accent-primary: var(--accent-terra);
  --accent-hover:   #b84a28;

  /* ── Bordes ─────────────────────────────────── */
  --border-default: rgba(255,255,255,0.08);
  --border-subtle:  rgba(255,255,255,0.05);
  --border-focus:   rgba(151, 60, 32, 0.6);

  /* ── Estados ────────────────────────────────── */
  --color-success:  #4D5B48;
  --color-warning:  #6D533C;
  --color-danger:   #973C20;
  --color-info:     #4F5959;

  /* ── Timer ───────────────────────────── */
  --timer-active:   #973C20;
  --timer-pulse:    rgba(151, 60, 32, 0.3);

  /* ── Radios ─────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ── Espaciado ──────────────────────────────── */
  --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;

  /* ── Tipografía ─────────────────────────────── */
  --font-display:  'Manrope', 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:     'Manrope', 'Inter', -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Reset y Base ─────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--accent-primary);
}

/* ── Utilidades Tipográficas ──────────────────── */
.text-hero {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-display {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 200;
  line-height: 1.2;
}

.text-title {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 300;
  line-height: 1.3;
}

.text-body {
  font-size: 1rem;
  font-weight: 300;
}

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

.text-label {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--text-muted);
}

.text-mono {
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.lowercase { text-transform: lowercase; }

.color-primary { color: var(--text-primary); }
.color-secondary { color: var(--text-secondary); }
.color-muted { color: var(--text-muted); }
.color-accent { color: var(--accent-primary); }

/* ── Layout Utilities ─────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }