/* ============================================================
   GARABATO · Design Tokens
   Sistema editorial, expresivo, "abrazando el caos"
   ============================================================ */

:root {
  /* ---- Colores de marca (los 4 del logotipo) --------------- */
  --brand-magenta:  #FF0068;
  --brand-violet:   #6800FF;
  --brand-yellow:   #FFD000;
  --brand-orange:   #FF9800;

  /* Variantes hover/active (derivadas manualmente, no algorítmicamente) */
  --brand-magenta-600: #E50058;
  --brand-violet-600:  #5200CC;
  --brand-yellow-600:  #E6BC00;
  --brand-orange-600:  #E68600;

  /* Tonos bajos — para fondos suaves y chips */
  --brand-magenta-50:  #FFEBF2;
  --brand-violet-50:   #F0E6FF;
  --brand-yellow-50:   #FFF8D6;
  --brand-orange-50:   #FFF0DB;

  /* ---- Tinta y papel --------------------------------------- */
  --ink-900:  #0A0A0F;   /* casi negro, con trace azulado */
  --ink-700:  #2A2A33;
  --ink-500:  #6B6B77;
  --ink-300:  #C9C9D1;
  --ink-200:  #E5E5EB;
  --ink-100:  #F2F2F5;
  --ink-50:   #F8F8FA;
  --paper:    #FFFFFF;

  /* ---- Semánticos ------------------------------------------ */
  --bg:           var(--paper);
  --bg-subtle:    var(--ink-50);
  --bg-muted:     var(--ink-100);
  --bg-invert:    var(--ink-900);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-300);
  --fg-invert:    var(--paper);

  --border:       var(--ink-200);
  --border-strong: var(--ink-900);

  --accent:       var(--brand-magenta);
  --accent-fg:    var(--paper);

  --success: #00A86B;
  --warning: var(--brand-orange);
  --danger:  var(--brand-magenta);
  --info:    var(--brand-violet);

  /* ---- Tipografía ------------------------------------------ */
  --font-display: 'Montserrat Alternates', 'Poppins', system-ui, sans-serif;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala tipográfica — ratio 1.25 (mayor third) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;
  --fs-128: 8rem;

  --fw-regular: 400;   /* @kind font */
  --fw-medium:  500;   /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:    700;   /* @kind font */
  --fw-black:   800;   /* @kind font */

  --lh-tight:   1.05;  /* @kind font */
  --lh-snug:    1.2;   /* @kind font */
  --lh-normal:  1.5;   /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  --tracking-tight:  -0.03em;   /* @kind font */
  --tracking-snug:   -0.015em;  /* @kind font */
  --tracking-normal: 0;         /* @kind font */
  --tracking-wide:    0.06em;   /* @kind font */
  --tracking-wider:   0.14em;   /* @kind font */

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

  /* ---- Radios (feel sutil, 6px base) ----------------------- */
  --r-0:    0;        /* @kind radius */
  --r-sm:   4px;
  --r-md:   6px;       /* default — elegido por el usuario */
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ---- Sombras --------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(10, 10, 15, 0.06);
  --shadow-md:  0 4px 12px rgba(10, 10, 15, 0.08), 0 1px 3px rgba(10, 10, 15, 0.04);
  --shadow-lg:  0 12px 32px rgba(10, 10, 15, 0.12), 0 2px 6px rgba(10, 10, 15, 0.06);
  --shadow-xl:  0 24px 64px rgba(10, 10, 15, 0.18);

  /* Sombras de color (para botones/hover de marca) */
  --shadow-magenta: 0 8px 24px rgba(255, 0, 104, 0.28);
  --shadow-violet:  0 8px 24px rgba(104, 0, 255, 0.28);

  /* ---- Motion ---------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* @kind other */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-snap:     cubic-bezier(0.9, 0, 0.1, 1);    /* @kind other */

  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   200ms;   /* @kind other */
  --dur-slow:   400ms;   /* @kind other */
  --dur-slower: 800ms;   /* @kind other */

  /* ---- Layout ---------------------------------------------- */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
  --container-max:    1440px;

  /* ---- Z-index --------------------------------------------- */
  --z-nav:     100;   /* @kind other */
  --z-overlay: 200;   /* @kind other */
  --z-modal:   300;   /* @kind other */
  --z-toast:   400;   /* @kind other */
}

/* ---- Reset y base --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--brand-yellow); color: var(--ink-900); }