/* ============================================================
   NIMBOO SHOWROOM · Design Tokens
   Editorial · Sage accent · Built to be themeable
   ============================================================ */

:root {
  /* ============== COLOR ============== */

  /* Base — Papel cálido (off-white) */
  --paper:        #FAFAF7;
  --paper-soft:   #F5F4EE;
  --paper-deeper: #EFEDE3;
  --surface:      #FFFFFF;

  /* Texto — Negro absoluto + cálidos */
  --ink-1000: #0A0A0A;
  --ink-900:  #1A1A1A;
  --ink-800:  #2C2620;
  --ink-700:  #3D3530;
  --ink-600:  #5A5048;
  --ink-500:  #8B7F6F;
  --ink-400:  #ABA294;
  --ink-300:  #C9C2B6;
  --ink-200:  #DBD6CC;
  --ink-100:  #ECE9E1;
  --ink-50:   #F5F4EE;

  /* Líneas */
  --line:      rgba(10, 10, 10, 0.08);
  --line-soft: rgba(10, 10, 10, 0.04);
  --line-firm: rgba(10, 10, 10, 0.16);
  --line-bold: rgba(10, 10, 10, 0.28);

  /* Acento Sage (verde oliva) */
  --sage:        #5A6B4F;
  --sage-deep:   #3F4D36;
  --sage-soft:   #E8EBE3;
  --sage-softer: #F2F4ED;
  --sage-text:   #3A4A30;

  /* Estados */
  --success:     #4F6B47;
  --success-bg:  #E8EBE3;
  --warn:        #8B5A2B;
  --warn-bg:    #F4EDE0;
  --danger:      #8B3A30;
  --danger-bg:   #F4E5E0;
  --info:        #3D5468;
  --info-bg:     #E5EBF0;

  /* ============== TIPOGRAFÍA ============== */

  --font-display: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', 'Georgia', serif;
  --font-ui:      'Inter', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Escala tipográfica */
  --fs-2xs:  10px;
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;
  --fs-6xl:  96px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --tracking-tight:   -0.02em;
  --tracking-display: -0.01em;
  --tracking-base:    0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.18em;
  --tracking-widest:  0.32em;

  /* ============== ESPACIADO ============== */

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* ============== BORDES Y RADIOS ============== */

  --r-xs:    4px;
  --r-sm:    6px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-2xl:   24px;
  --r-full:  999px;

  /* ============== SOMBRAS ============== */

  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.06), 0 2px 4px rgba(10, 10, 10, 0.04);
  --shadow-lg: 0 12px 28px rgba(10, 10, 10, 0.08), 0 4px 8px rgba(10, 10, 10, 0.04);
  --shadow-xl: 0 24px 60px rgba(10, 10, 10, 0.12), 0 8px 16px rgba(10, 10, 10, 0.06);

  /* ============== ANIMACIÓN ============== */

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --t-fast:    140ms;
  --t-base:    220ms;
  --t-slow:    320ms;
  --t-slower:  500ms;

  /* ============== LAYOUT ============== */

  --sidebar-w: 240px;
  --topbar-h:  68px;
  --content-max: 1280px;
}

/* ============== TEMA OSCURO (futuro, no se usa todavía) ============== */
[data-theme="midnight"] {
  --paper: #0E0E0C;
  --surface: #1A1A18;
  --ink-1000: #FAFAF7;
  --ink-900: #F0F0EB;
  --ink-600: #B8B4A6;
  --line: rgba(255, 255, 255, 0.08);
  --sage: #8B9F7E;
  --sage-soft: rgba(139, 159, 126, 0.12);
}