/* AMKA building blocks — design tokens
   Colour and type law from brands/amka-foods. Fonts fall back to system stacks
   until Averta / Belgro / Alcester are licensed and self-hosted. */

:root{
  /* brand law */
  --gold:#FFD700;
  --gold-deep:#C9A227;      /* gold that passes contrast on white */
  --indigo:#2E3192;
  --indigo-deep:#22245F;
  --black:#111010;
  --white:#FFFFFF;

  /* warm neutrals — the ground the playful colour sits on */
  --cream:#FBF6EC;
  --sand:#F3E9D8;
  --clay:#E8D9C2;
  --ink:#1A1714;
  --muted:#6E6558;
  --line:#E2D7C4;

  /* per-product accents (the blob colours behind each bag) */
  --blend:#C9A227;          /* AMKA Blend, gold goddess */
  --kenya:#2E3192;          /* Kenya AA, indigo sun */
  --terroir:#2F6E73;        /* Terroir, blue jellyfish */
  --experimental:#B23A2E;   /* Experimental, red lobster */

  /* type */
  --display:"Belgro","Alcester",ui-serif,Georgia,serif;
  --body:"Averta",ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* scale */
  --t-hero:clamp(38px,5.2vw,72px);
  --t-h2:clamp(26px,3.2vw,44px);
  --t-h3:20px;
  --t-body:16px;
  --t-small:13px;
  --t-eyebrow:11px;

  /* rhythm */
  --gap:24px;
  --pad:clamp(20px,4vw,72px);
  --radius:18px;
  --radius-lg:32px;

  /* motion — see from-dion/MOTION.md */
  --fast:160ms;
  --base:240ms;
  --slow:420ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
/* BUTTON LAW (Dion 2026-09-08, live review): the label of every button, pill and tag is centred in its
   control, vertically and horizontally, at every size and state. Declared EARLY so a component that
   needs a different justify (a two-part add button with a price on the right) still wins later. Any
   exception is written down beside the component that makes it. */
button,.btn,.add,.tag,.badge,.pill,.size,.go,.icobtn,.chips a,.cafe .go{display:inline-flex;align-items:center;justify-content:center;line-height:1;text-align:center}
.tags{align-items:center}
.tag{min-height:26px}

body{margin:0;background:var(--cream);color:var(--ink);font:var(--t-body)/1.6 var(--body);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;line-height:1.06;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}

.eyebrow{font:700 var(--t-eyebrow)/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--body);letter-spacing:.02em;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform var(--fast) var(--ease),background var(--fast)}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--indigo);color:var(--white)}
.btn-gold{background:var(--gold);color:var(--black)}
.btn-ghost{background:transparent;border-color:currentColor}
/* Boon Boona's offset-border button (s060) */
.btn-offset{position:relative;background:var(--gold);color:var(--black);border-radius:8px}
.btn-offset::after{content:"";position:absolute;inset:0;border:1.5px solid var(--black);
  border-radius:8px;transform:translate(5px,5px);transition:transform var(--base) var(--ease)}
.btn-offset:hover::after{transform:translate(2px,2px)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}