/* Foliume — tokens de marca para piezas de marketing
 *
 * Copia self-contained de foliume-brand/tokens/ (colores + tipografía),
 * con las fuentes servidas desde Google Fonts para que cualquier pieza
 * funcione sin bajarse archivos.
 *
 * Fuente de verdad: ~/Documents/Claude/foliume-brand/
 * Si cambia la marca, se actualiza allá primero y después acá.
 *
 * Uso: <link rel="stylesheet" href="/brand/tokens.css">
 * No hardcodees hex. Usá las custom properties.
 */

@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  /* === Primary · Dark Purple === */
  --color-dark-purple-400: #312A56;
  --color-dark-purple-500: #130F26;
  --color-dark-purple-600: #04030D;

  /* === Primary · Purple (500 es el hero) === */
  --color-purple-400: #6868DE;
  --color-purple-500: #3D3DCC;
  --color-purple-600: #21218B;

  /* === Primary · Lilac Blue === */
  --color-lilac-blue-400: #E2E2FF;
  --color-lilac-blue-500: #B6B6FE;
  --color-lilac-blue-600: #8A8AFD;

  /* === Primary · Light === */
  --color-light-400: #FAFAFA;
  --color-light-500: #F6F5FF;
  --color-light-600: #EBE8FF;

  /* === Secondary · Blue === */
  --color-blue-400: #ECF0FF;
  --color-blue-500: #80AAFF;
  --color-blue-600: #1F58CC;
  --color-blue-700: #051C4D;

  /* === Accent · Green === */
  --color-green-400: #BDF2D7;
  --color-green-500: #208E57;
  --color-green-600: #094125;
  --color-green-700: #0B1410;

  /* === Neutral === */
  --color-neutral-white: #FFFFFF;
  --color-neutral-200:   #F7F7FC;
  --color-neutral-300:   #EFF0F6;
  --color-neutral-400:   #DCDDEB;
  --color-neutral-500:   #A0A3BD;
  --color-neutral-600:   #6E7191;
  --color-neutral-700:   #4E4775;
  --color-neutral-800:   #211F54;

  /* === Aliases semánticos === */
  --color-brand:           var(--color-purple-500);
  --color-brand-hover:     var(--color-purple-600);
  --color-brand-soft:      var(--color-lilac-blue-400);
  --color-surface:         var(--color-neutral-white);
  --color-surface-muted:   var(--color-neutral-200);
  --color-surface-inverse: var(--color-dark-purple-500);
  --color-text:            var(--color-neutral-800);
  --color-text-muted:      var(--color-neutral-600);
  --color-text-inverse:    var(--color-light-400);
  --color-border:          var(--color-neutral-300);

  /* === Gradientes === */
  --gradient-brand:        linear-gradient(135deg, #3D3DCC 0%, #21218B 100%);
  --gradient-brand-soft:   linear-gradient(135deg, #3D3DCC 0%, #B6B6FE 100%);
  --gradient-brand-blue:   linear-gradient(135deg, #3D3DCC 0%, #80AAFF 100%);
  --gradient-brand-accent: linear-gradient(135deg, #3D3DCC 0%, #BDF2D7 100%);
  --gradient-brand-dark:   linear-gradient(135deg, #130F26 0%, #B6B6FE 100%);

  /* === Sombras === */
  --shadow-button:  0px 6px 20px 0px rgba(74, 58, 255, 0.08);
  --shadow-general: 0px 2px 12px 0px rgba(20, 20, 43, 0.08);

  /* === Radios === */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* === Tipografía === */
  --font-display: 'Inria Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
}

/* === Escala tipográfica ===
 * Los tamaños del brand kit están pensados para pantallas grandes.
 * Acá van con clamp() para que las piezas de marketing no rompan en mobile. */

.display-lg { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; }
.display-md { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1.2; }
.display-sm { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 1.75rem); line-height: 1.4; }

.heading-1 { font-family: var(--font-body); font-weight: 600; font-size: clamp(2rem, 4vw, 3.375rem); line-height: 1.2; }
.heading-2 { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.2; }
.heading-3 { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.375rem); line-height: 1.3; }
.heading-4 { font-family: var(--font-body); font-weight: 600; font-size: 1.5rem;  line-height: 1.4; }
.heading-5 { font-family: var(--font-body); font-weight: 600; font-size: 1.375rem; line-height: 1.3; }
.heading-6 { font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.35; }

.body-large { font-family: var(--font-body); font-weight: 400; font-size: 1.25rem;  line-height: 1.6; }
.body       { font-family: var(--font-body); font-weight: 400; font-size: 1rem;     line-height: 1.5; }
.body-small { font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; line-height: 1.5; }

.uppercase {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.375rem;
  text-transform: uppercase;
}

/* === Base === */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

/* === Botón pill (el patrón de Foliume) === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  border: none;
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-primary { background: var(--color-brand); color: var(--color-text-inverse); box-shadow: var(--shadow-button); }
.btn-primary:hover { background: var(--color-brand-hover); }
.btn-secondary { background: var(--color-brand-soft); color: var(--color-purple-600); }
.btn-secondary:hover { background: var(--color-lilac-blue-500); }