/* ═══════════════════════════════════════════════════════
   FREEscience — Design Tokens
   Estilo basado en alternativas-feed.html
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Core palette (light) ── */
  --bg:            #f8f7f3;
  --surface:       #ffffff;
  --text:          #172d35;
  --muted:         #59696e;
  --line:          #dce3e0;
  --accent:        #155e65;
  --accent-on:     #ffffff;
  --accent-light:  #a5ddd3;
  --soft:          #e4efeb;
  --accent-bg:     #e4efeb;

  /* ── Extended palette ── */
  --clay-bg:       #f5e6dc;
  --clay-text:     #894627;

  /* ── Semantic ── */
  --color-success:    #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-warning:    #92400e;
  --color-warning-bg: #fef3c7;
  --color-danger:     #b91c1c;
  --color-danger-bg:  #fee2e2;
  --color-info:       #1e40af;
  --color-info-bg:    #dbeafe;

  /* ── Aliases (keep backward-compat) ── */
  --color-paper:       var(--bg);
  --color-ink:         var(--text);
  --color-accent:      var(--accent);
  --color-accent-hover:#0d4a50;
  --color-accent-light:var(--accent-light);
  --color-accent-bg:   var(--soft);
  --stone-50:  #f8f7f3;
  --stone-100: #edecea;
  --stone-200: #dce3e0;
  --stone-300: #c2cccb;
  --stone-400: #9aacab;
  --stone-500: #59696e;
  --stone-600: #445558;
  --stone-700: #303d3f;
  --stone-800: #1d282d;
  --stone-900: #172d35;
  --stone-950: #0e1c21;

  /* ── Typography ── */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-brand:   'Inter', system-ui, sans-serif;

  --fs-xs:   0.6875rem;  /* 11px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-base: 0.875rem;   /* 14px */
  --fs-md:   1.0625rem;  /* 17px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.375rem;   /* 22px */
  --fs-2xl:  1.5625rem;  /* 25px */
  --fs-3xl:  2rem;       /* 32px */
  --fs-4xl:  2.5rem;     /* 40px */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     750;

  --lh-tight:   1.18;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.625;

  /* ── Spacing ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   9px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(23, 45, 53, 0.04);
  --shadow-sm: 0 1px 3px rgba(23, 45, 53, 0.06), 0 1px 2px rgba(23, 45, 53, 0.04);
  --shadow-md: 0 4px 8px rgba(23, 45, 53, 0.06), 0 2px 4px rgba(23, 45, 53, 0.04);
  --shadow-lg: 0 10px 20px rgba(23, 45, 53, 0.07), 0 4px 8px rgba(23, 45, 53, 0.04);
  --shadow-xl: 0 20px 40px rgba(23, 45, 53, 0.1), 0 8px 16px rgba(23, 45, 53, 0.05);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ── Layout ── */
  --header-height: 64px;
  --sidebar-width: 240px;
  --content-max:   1180px;
  --content-narrow: 680px;
}