/* SLOWPOKE COFFEE tokens: the single source of truth. Re-skin here first. */

@font-face {
  font-family: "Shrikhand";
  src: url("../fonts/shrikhand-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primitives: sticker pastel family. Some steps are intentionally spare;
     they exist so re-skins have room to move. */
  --butter: #fff3dc;
  --butter-2: #fdeac4;
  --butter-3: #f8ddab;
  --cacao: #3b2a20;
  --cacao-2: #4a362a;
  --cacao-3: #5b4435;
  --white: #ffffff;
  --cream: #fffaf0;
  --pink: #ff7dbe;        /* bright: for cacao surfaces + big marks */
  --pink-deep: #d34e8e;   /* deep: for butter surfaces, AA at display sizes */
  --pink-ink: #b93a76;    /* deepest: small bold type on white/butter, AA at label sizes
                             (5.34:1 on #fff, 4.86:1 on butter) */
  --pink-tint: #ffe3f0;   /* soft fill for chips and bands */
  /* light-ground support colours, named so white cards can restate them
     instead of hardcoding browns halfway down main.css */
  --ink-muted: #6f5849;             /* muted brown: secondary text on light grounds */
  --ink-line: rgba(59, 42, 32, 0.22);
  --focus-light: #1247d4;           /* focus ring on butter, cream and white */
  --focus-dark: #9db8ff;            /* focus ring on cacao */

  /* semantic (butter theme is the default) */
  --bg: var(--butter);
  --bg-2: var(--butter-2);
  --fg: var(--cacao);
  --muted: var(--ink-muted);
  --line: var(--ink-line);
  --line-strong: var(--cacao);
  --accent: var(--pink-deep);
  --accent-raw: var(--pink);
  --focus: var(--focus-light);

  /* type: fat display serif used sparingly, friendly sans does the labor */
  --font-display: "Shrikhand", "Georgia", serif;
  --font-body: "Mulish", "Avenir Next", "Segoe UI", sans-serif;
  --t-display: clamp(2.4rem, 6.5vw, 5.25rem);
  --t-h1: clamp(2.1rem, 5vw, 4rem);
  --t-h2: clamp(1.7rem, 3.6vw, 2.8rem);
  --t-h3: clamp(1.15rem, 2vw, 1.5rem);
  --t-lead: clamp(1.1rem, 1.7vw, 1.35rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-label: 0.78rem;
  --lh-display: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --track-label: 0.12em;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section-pad: clamp(4.5rem, 11vh, 8rem);
  --gutter: clamp(1rem, 2.5vw, 1.5rem);
  --edge: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 38rem;
  --max-w: 78rem;

  /* shape + depth: sticker system = 2px borders + hard offset shadows.
     Radius stays modest; the stickers do the softness. */
  --r-1: 6px;
  --r-2: 10px;
  --r-pill: 999px;
  --bw: 2px;
  --shadow-hard: 4px 4px 0 var(--cacao);
  --shadow-hard-sm: 3px 3px 0 var(--cacao);
  --shadow-hard-lg: 7px 7px 0 var(--cacao);

  /* scallop divider geometry */
  --scallop-h: 22px;
  --scallop-w: 44px;

  /* motion */
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* layers */
  --z-header: 40;
  --z-menu: 50;
  --z-skip: 60;
}

/* cacao theme: any element with data-theme="cacao" flips the semantic set */
[data-theme="cacao"] {
  --bg: var(--cacao);
  --bg-2: var(--cacao-2);
  --fg: var(--butter);
  --muted: #cbb49f;
  --line: rgba(255, 243, 220, 0.25);
  --line-strong: var(--butter);
  --accent: var(--pink);
  --focus: var(--focus-dark);
  --shadow-hard: 4px 4px 0 rgba(0, 0, 0, 0.55);
  --shadow-hard-sm: 3px 3px 0 rgba(0, 0, 0, 0.55);
  --shadow-hard-lg: 7px 7px 0 rgba(0, 0, 0, 0.55);
}

/* pink band theme: bright announcement surfaces */
[data-theme="pink"] {
  --bg: var(--pink);
  --bg-2: var(--pink-tint);
  --fg: var(--cacao);
  --muted: #59332f;
  --line: rgba(59, 42, 32, 0.3);
  --line-strong: var(--cacao);
  --accent: var(--cacao);
  --focus: var(--focus-light);
}