/* ─────────────────────────────────────────────────────────────────
 * theme.css — Sistema de diseño compartido
 * Pedro Bardají · Proyectos
 *
 * Inspirado en Stripe / Notion: blanco limpio, sombras suaves,
 * tipografía system-stack, acento azul.
 *
 * Reusable en cualquier sitio. Variables CSS para tematizar.
 * ─────────────────────────────────────────────────────────────────
 */

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ===== Tokens ===== */
:root {
  /* Color — neutros */
  --c-bg:        #ffffff;
  --c-bg-soft:   #fafbfc;
  --c-bg-mute:   #f3f4f8;
  --c-text:      #0e0e10;
  --c-text-2:    #45474f;
  --c-text-3:    #82838d;
  --c-border:    rgba(15, 23, 42, .10);
  --c-border-2:  rgba(15, 23, 42, .18);

  /* Color — acento (Stripe-ish indigo) */
  --c-accent:    #3b56f7;
  --c-accent-h:  #2841d9;     /* hover */
  --c-accent-s:  #e7eafe;     /* soft tint */

  /* Color — semánticos */
  --c-success:   #1ca351;
  --c-success-s: #e6f5ec;
  --c-warn:      #c97700;
  --c-warn-s:    #fdf4e3;
  --c-danger:    #e02d3c;
  --c-danger-s:  #fdebed;

  /* Acentos por proyecto (cada card tiene el suyo) */
  --c-proj-sms:    #3b56f7;   /* azul   — SMS */
  --c-proj-sub:    #7c3aed;   /* morado — subscripciones */
  --c-proj-wa:     #1ca351;   /* verde  — WhatsApp */
  --c-proj-visa:   #c97700;   /* ámbar  — visa */

  /* Tipografía */
  --ff-sans: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Helvetica Neue",
             "Segoe UI", Roboto, Arial, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Tamaños fluidos (clamp para responsive sin media queries) */
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  clamp(20px, 1.6vw + 14px, 24px);
  --fs-2xl: clamp(24px, 2vw + 16px, 32px);
  --fs-3xl: clamp(32px, 3vw + 18px, 48px);
  --fs-4xl: clamp(40px, 4vw + 20px, 64px);

  /* Espaciados (basados en escala de 4) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Radios */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 999px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .04);
  --sh-2: 0 4px 12px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .04);
  --sh-3: 0 12px 24px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .05);
  --sh-4: 0 24px 48px rgba(15, 23, 42, .15), 0 8px 16px rgba(15, 23, 42, .08);

  /* Animaciones */
  --ease:    cubic-bezier(.4, 0, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-fast:  120ms;
  --t-med:   220ms;
  --t-slow:  400ms;
}

/* ===== Base ===== */
html, body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== Tipografía ===== */
h1, .h1 { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
h2, .h2 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
h3, .h3 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h4, .h4 { font-size: var(--fs-xl);  font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
h5, .h5 { font-size: var(--fs-lg);  font-weight: 600; line-height: 1.4; }

p { line-height: 1.6; color: var(--c-text-2); }
.text-dim { color: var(--c-text-2); }
.text-faint { color: var(--c-text-3); }
.mono { font-family: var(--ff-mono); }

a { color: var(--c-accent); transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--c-accent-h); }

::selection { background: var(--c-accent); color: #fff; }

/* ===== Layout ===== */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.container-narrow {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.section { padding: var(--sp-9) 0; }
.section-sm { padding: var(--sp-7) 0; }

/* ===== Botones ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 22px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
  border: 1px solid transparent;
}
.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--c-accent);
  color: #fff;
  box-shadow: var(--sh-1);
}
.btn-primary:hover {
  background: var(--c-accent-h);
  box-shadow: var(--sh-2);
}

.btn-ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border-2);
}
.btn-ghost:hover {
  background: var(--c-bg-mute);
  border-color: var(--c-border);
}

.btn-soft {
  background: var(--c-bg-mute);
  color: var(--c-text);
}
.btn-soft:hover {
  background: var(--c-border);
}

.btn-sm { padding: 8px 14px; font-size: var(--fs-xs); }
.btn-lg { padding: 14px 28px; font-size: var(--fs-md); }

/* ===== Tarjetas ===== */
.card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--sh-1);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: var(--c-border-2);
}

/* ===== Badges ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.badge-success { background: var(--c-success-s); color: var(--c-success); }
.badge-warn    { background: var(--c-warn-s);    color: var(--c-warn); }
.badge-danger  { background: var(--c-danger-s);  color: var(--c-danger); }
.badge-soft    { background: var(--c-bg-mute);   color: var(--c-text-2); }

.dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* ===== Inputs ===== */
.input {
  width: 100%;
  padding: 11px 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  color: var(--c-text);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(59, 86, 247, .12);
}
.input::placeholder { color: var(--c-text-3); }

/* ===== Utilidades ===== */
.flex      { display: flex; }
.grid      { display: grid; }
.items-c   { align-items: center; }
.justify-c { justify-content: center; }
.justify-b { justify-content: space-between; }
.gap-1     { gap: var(--sp-1); }
.gap-2     { gap: var(--sp-2); }
.gap-3     { gap: var(--sp-3); }
.gap-4     { gap: var(--sp-4); }
.gap-5     { gap: var(--sp-5); }
.gap-6     { gap: var(--sp-6); }

.text-c    { text-align: center; }
.text-l    { text-align: left; }

.w-full    { width: 100%; }
.mt-2      { margin-top: var(--sp-2); }
.mt-3      { margin-top: var(--sp-3); }
.mt-4      { margin-top: var(--sp-4); }
.mt-5      { margin-top: var(--sp-5); }
.mt-6      { margin-top: var(--sp-6); }

/* ===== Animaciones de entrada ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUp var(--t-slow) var(--ease) both; }
.fade-up-1 { animation-delay: .05s; }
.fade-up-2 { animation-delay: .15s; }
.fade-up-3 { animation-delay: .25s; }
.fade-up-4 { animation-delay: .35s; }
.fade-up-5 { animation-delay: .45s; }

/* ===== Footer base ===== */
.footer {
  margin-top: auto;
  padding: var(--sp-7) 0 var(--sp-6);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .section    { padding: var(--sp-7) 0; }
  .section-sm { padding: var(--sp-6) 0; }
}

/* ===== Modo oscuro (opcional, lo aplicas con data-theme="dark") ===== */
:root[data-theme="dark"] {
  --c-bg:        #0a0b10;
  --c-bg-soft:   #11131a;
  --c-bg-mute:   #1a1c25;
  --c-text:      #f5f5f7;
  --c-text-2:    #a3a4b0;
  --c-text-3:    #5a5a66;
  --c-border:    rgba(255, 255, 255, .08);
  --c-border-2:  rgba(255, 255, 255, .14);
  --c-accent:    #5b76ff;
  --c-accent-h:  #7488ff;
  --c-accent-s:  rgba(91, 118, 255, .15);
  --c-success-s: rgba(48, 209, 88, .15);
  --c-warn-s:    rgba(255, 159, 10, .15);
  --c-danger-s:  rgba(255, 69, 58, .15);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 4px 12px rgba(0, 0, 0, .5);
  --sh-3: 0 12px 24px rgba(0, 0, 0, .6);
  --sh-4: 0 24px 48px rgba(0, 0, 0, .7);
}