/* Tokens del KOFF Design System, copiados tal cual de la carpeta tokens del DS. No editar aqui: cambiar en el design system. */
:root{
  /* --- Base ink scale: sampled from the KOFF logo line-art (#3d2618) --- */
  --koff-espresso:#2A190F;
  --koff-ink:#3D2618;
  --koff-cocoa:#54382a;
  --koff-mocha:#7B5B49;
  --koff-latte:#A98D7B;
  --koff-oat:#CBB9AC;

  /* --- Base cream scale: sampled from the logo's paper ground (#fdfcf8) --- */
  --koff-paper:#FDFCF8;
  --koff-cream:#F7F3E9;
  --koff-cream-deep:#EFE9DA;
  --koff-sand:#E3DAC7;

  /* --- Monochrome print scale. The can labels and paper stock are printed in black,
     so packaging and any single-colour print job uses these, not the brown ink. --- */
  --koff-black:#111111;
  --koff-graphite:#3A3A3A;
  --koff-ash:#6E6E6E;
  --koff-smoke:#A6A6A6;
  --koff-bone:#F4F2ED;

  /* --- System feedback only. Use sparingly; KOFF is a two-colour brand. --- */
  --koff-leaf:#5C6E3C;
  --koff-honey:#B4791F;
  --koff-clay:#8E3B2A;

  /* --- Semantic aliases --- */
  --surface-canvas:var(--koff-cream);
  --surface-card:var(--koff-paper);
  --surface-raised:#FFFFFF;
  --surface-inverse:var(--koff-ink);
  --surface-tint:var(--koff-cream-deep);

  --text-strong:var(--koff-espresso);
  --text-body:var(--koff-ink);
  --text-muted:var(--koff-mocha);
  --text-subtle:var(--koff-latte);
  --text-on-inverse:var(--koff-paper);

  --line-hairline:var(--koff-sand);
  --line-strong:var(--koff-ink);

  --icon-default:var(--koff-ink);
  --icon-muted:var(--koff-mocha);

  --action-primary-bg:var(--koff-ink);
  --action-primary-fg:var(--koff-paper);
  --action-primary-bg-hover:var(--koff-espresso);
  --action-secondary-bg:transparent;
  --action-secondary-fg:var(--koff-ink);
  --action-secondary-border:var(--koff-ink);
  --action-ghost-bg-hover:var(--koff-cream-deep);
  --action-disabled-bg:var(--koff-sand);
  --action-disabled-fg:var(--koff-latte);

  --focus-ring:var(--koff-ink);

  --feedback-success:var(--koff-leaf);
  --feedback-warning:var(--koff-honey);
  --feedback-danger:var(--koff-clay);
}

/* Monochrome theme. Put class="koff-mono" on any subtree — a can label, a print
   sheet, a whole page — and every semantic token retargets from coffee brown to
   black. Nothing else in the markup changes. */
.koff-mono{
  --surface-canvas:var(--koff-bone);
  --surface-card:#FFFFFF;
  --surface-raised:#FFFFFF;
  --surface-inverse:var(--koff-black);
  --surface-tint:#E9E7E2;

  --text-strong:#000000;
  --text-body:var(--koff-black);
  --text-muted:var(--koff-ash);
  --text-subtle:var(--koff-smoke);
  --text-on-inverse:var(--koff-bone);

  --line-hairline:#DAD7D1;
  --line-strong:var(--koff-black);

  --icon-default:var(--koff-black);
  --icon-muted:var(--koff-ash);

  --action-primary-bg:var(--koff-black);
  --action-primary-fg:#FFFFFF;
  --action-primary-bg-hover:#000000;
  --action-secondary-border:var(--koff-black);
  --action-ghost-bg-hover:#E9E7E2;
  --action-disabled-bg:#DAD7D1;
  --action-disabled-fg:var(--koff-smoke);

  --focus-ring:var(--koff-black);

  --feedback-success:var(--koff-graphite);
  --feedback-warning:var(--koff-graphite);
  --feedback-danger:var(--koff-black);
}

:root{
  --font-display:"Poppins","Futura","Century Gothic",system-ui,sans-serif;
  --font-body:"Work Sans","Helvetica Neue",Arial,sans-serif;

  --weight-body:400;
  --weight-medium:500;
  --weight-strong:600;
  --weight-display:800;
  --weight-brand:900;

  /* Display / wordmark-adjacent headings. Tight, all-caps by default. */
  --type-hero-size:72px;
  --type-hero-line:0.94;
  --type-hero-track:-0.02em;
  --type-display-size:48px;
  --type-display-line:1.0;
  --type-display-track:-0.015em;
  --type-title-size:32px;
  --type-title-line:1.1;
  --type-title-track:-0.01em;
  --type-heading-size:22px;
  --type-heading-line:1.2;
  --type-heading-track:0;

  /* Body / menu copy */
  --type-lead-size:19px;
  --type-lead-line:1.55;
  --type-body-size:16px;
  --type-body-line:1.6;
  --type-small-size:14px;
  --type-small-line:1.5;
  --type-caption-size:12px;
  --type-caption-line:1.4;

  /* Utility label: menu categories, nav, button text */
  --type-label-size:13px;
  --type-label-track:0.14em;
  --type-price-size:16px;
}

:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --gutter-mobile:20px;
  --gutter-desktop:48px;
  --measure-prose:62ch;
  --container-max:1200px;
  --section-gap:var(--space-9);
}

:root{
  /* Rounded, never sharp: the logo is drawn with round caps and round joins. */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-pill:999px;

  --stroke-hairline:1px;
  --stroke-regular:1.5px;
  --stroke-bold:2px;
  --stroke-logo:8px; /* line weight ratio of the KOFF mark at 100px */
  --linecap:round; /* @kind other */
}

:root{
  /* Shadows are warm-brown and barely there. Structure comes from hairlines,
     not from lifting things off the page. */
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(42,25,15,.06);
  --shadow-md:0 4px 14px rgba(42,25,15,.07);
  --shadow-lg:0 14px 40px rgba(42,25,15,.10);
  --shadow-inset-press:inset 0 2px 0 rgba(42,25,15,.14);
  --border-card:var(--stroke-hairline) solid var(--line-hairline);
  --border-strong:var(--stroke-bold) solid var(--line-strong);
}

:root{
  --ease-soft:cubic-bezier(.32,.72,.32,1); /* @kind other */
  --ease-out:cubic-bezier(.22,1,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.6,0,.4,1); /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:360ms; /* @kind other */
  --duration-steam:6s; /* @kind other */
  --press-scale:.97; /* @kind other */
  --hover-lift:-1px;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-canvas);color:var(--text-body);font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--type-body-line);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);color:var(--text-strong);margin:0}
h1{font-size:var(--type-display-size);line-height:var(--type-display-line);letter-spacing:var(--type-display-track)}
h2{font-size:var(--type-title-size);line-height:var(--type-title-line);letter-spacing:var(--type-title-track)}
h3{font-size:var(--type-heading-size);line-height:var(--type-heading-line)}
p{margin:0}
a{color:var(--text-body);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:opacity var(--duration-fast) var(--ease-soft)}
a:hover{opacity:.66}
button{font-family:var(--font-body)}
:focus-visible{outline:var(--stroke-bold) solid var(--focus-ring);outline-offset:2px}
.koff-label{font-family:var(--font-body);font-weight:var(--weight-strong);font-size:var(--type-label-size);letter-spacing:var(--type-label-track);text-transform:uppercase}