/* DESIGN TOKENS — audited. Do not change a hex without re-measuring contrast.
   Yeraldin — see CLAUDE.md before editing. */

:root{
    --papel:#F5EFE4;
    --papel-2:#EDE5D7;
    --tinta:#211C17;
    --tinta-soft:#5A5148;
    --tinta-mute:#6E6458;
    --arcilla:#AF5F3E;
    --arcilla-text:#9E5031;
    --verde:#1E4638;
    --verde-deep:#16352A;
    --on-verde:#F5EFE4;
    --laton:#8F7546;
    --laton-on-verde:#C9AC78;
    --rule:#D7CDBB;
    --rule-strong:#8E8270;
    --t-12:12px; --t-14:14px; --t-16:16px; --t-20:20px; --t-25:25px;
    --t-31:31px; --t-39:39px; --t-49:49px; --t-61:61px;
    --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px;
    --s-32:32px; --s-48:48px; --s-64:64px; --s-96:96px;
    --maxw:1060px;
    /* motion */
    --dur-fast:150ms; --dur:220ms; --dur-slow:420ms; --dur-draw:1700ms;
    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --papel:#17150F; --papel-2:#1F1C15;
      --tinta:#F0EAE0; --tinta-soft:#B6ADA0; --tinta-mute:#9A9083;
      --arcilla:#D08A64; --arcilla-text:#DB9873;
      --verde:#24503F; --verde-deep:#143126;
      --laton:#C4A778; --rule:#332E24; --rule-strong:#726A5B;
    }
  }
  :root[data-theme="dark"]{
    --papel:#17150F; --papel-2:#1F1C15;
    --tinta:#F0EAE0; --tinta-soft:#B6ADA0; --tinta-mute:#9A9083;
    --arcilla:#D08A64; --arcilla-text:#DB9873;
    --verde:#24503F; --verde-deep:#143126;
    --laton:#C4A778; --rule:#332E24; --rule-strong:#726A5B;
  }