/* ============================================================
   MINERIA DS · tokens
   Design tokens as CSS custom properties.
   Inspired by the visual character of a book fair in a stone
   palace: cantera (limestone), vino (wine), oro (gold leaf).

   Importable from any project via:
     <link rel="stylesheet" href="/projects/<id>/tokens.css" />
   ============================================================ */
:root {
  /* ---- Color · Cantera (neutral / stone) ---- */
  --cantera-50:  #f7f3ec;
  --cantera-100: #efe8db;
  --cantera-200: #e2d6bf;
  --cantera-300: #c9b896;
  --cantera-400: #a8946d;
  --cantera-500: #7c6a4a;
  --cantera-600: #574a33;
  --cantera-700: #3a3122;
  --cantera-800: #221d14;
  --cantera-900: #14110b;

  /* ---- Color · Vino (primary action) ---- */
  --vino-50:  #fbeeee;
  --vino-100: #f4d2d2;
  --vino-300: #c97676;
  --vino-500: #8a2a2a;
  --vino-600: #6e1f1f;
  --vino-700: #531616;

  /* ---- Color · Oro (gold accent) ---- */
  --oro-100: #f4e6b3;
  --oro-300: #d9b04a;
  --oro-500: #a87b1e;
  --oro-700: #6e4f12;

  /* ---- Color · Tinta (academic blue, links) ---- */
  --tinta-100: #e6ecf6;
  --tinta-500: #1f3a6b;
  --tinta-700: #14264a;

  /* ---- Surfaces / semantic aliases ---- */
  --bg:           var(--cantera-50);
  --bg-elev:      #fffaf0;
  --ink:          var(--cantera-900);
  --ink-soft:     var(--cantera-700);
  --ink-mute:     var(--cantera-500);
  --rule:         var(--cantera-200);
  --rule-strong:  var(--cantera-300);

  --color-primary:        var(--vino-600);
  --color-primary-hover:  var(--vino-700);
  --color-primary-tint:   var(--vino-50);
  --color-accent:         var(--oro-300);
  --color-link:           var(--vino-600);

  /* ---- Spacing scale (base 4) ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* ---- Radii ---- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:  10px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-sm: 0 1px 2px rgba(34,29,20,.08), 0 0 0 1px rgba(34,29,20,.04);
  --sh-md: 0 4px 14px rgba(34,29,20,.08), 0 0 0 1px rgba(34,29,20,.04);
  --sh-lg: 0 14px 38px rgba(34,29,20,.12), 0 0 0 1px rgba(34,29,20,.06);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

  /* ---- Layout ---- */
  --container: 1280px;
  --container-narrow: 880px;
}