/* Klyver — Design Tokens v2.0 | Direction: App-Aligned Professional */

:root {
  /* ── Color ─────────────────────────────────────── */
  --ink:          #0F172A;                    /* slate-900  — texto principal   */
  --ink-60:       rgba(15, 23, 42, 0.60);
  --ink-30:       rgba(15, 23, 42, 0.30);
  --paper:        #F8FAFC;                    /* slate-50   — fondo principal   */
  --paper-2:      #F1F5F9;                    /* slate-100  — fondo secundario  */
  --paper-3:      #E2E8F0;                    /* slate-200  — fondo terciario   */
  --accent:       #2563EB;                    /* blue-600   — acento primario   */
  --accent-soft:  #EFF6FF;                    /* blue-50    — fondo suave acento*/
  --accent-dark:  #1D4ED8;                    /* blue-700   — hover acento      */
  --line:         #E2E8F0;                    /* slate-200  — bordes            */
  --line-strong:  #CBD5E1;                    /* slate-300  — bordes fuertes    */
  --muted:        #64748B;                    /* slate-500  — texto secundario  */
  --success:      #16A34A;                    /* green-600                      */
  --warn:         #DC2626;                    /* red-600                        */
  --ink-inverse:  #F8FAFC;                    /* sobre fondos oscuros           */

  /* ── Typography ─────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  5.5rem;

  /* Line height */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  /* ── Spacing ─────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Borders ─────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10);

  /* ── Motion ──────────────────────────────────────── */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:    180ms;
  --dur-normal:  280ms;
  --dur-slow:    440ms;

  /* ── Layout ──────────────────────────────────────── */
  --max-w:     1200px;
  --max-w-sm:  720px;
  --max-w-xs:  560px;
  --nav-h:     68px;
}

@media (max-width: 768px) {
  :root {
    --text-3xl: 2.25rem;
    --text-4xl: 2.75rem;
    --text-5xl: 3.25rem;
  }
}