/* CanMyPetEat brand tokens + logo classes
   Mark: Paw in the bowl. The paw is the verdict; set --cmp-verdict to recolour it. */

:root {
  --cmp-ink: #241d18;
  --cmp-safe: #3f8f5f;
  --cmp-caution: #e0a02c;
  --cmp-toxic: #c4402a;
  --cmp-mist: #ede4d8;
  --cmp-ground: #faf6f0;
  --cmp-white: #ffffff;

  --cmp-text: #241d18;
  --cmp-text-muted: #7a6b5e;
  --cmp-text-on-ink: #faf6f0;
  --cmp-muted-on-ink: #c0b1a2;
  --cmp-accent-deep: #2e7a4f;

  --cmp-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cmp-wordmark-tracking: -0.035em;

  --cmp-radius: 12px;  /* the food search field, inputs */
  --cmp-radius-card: 16px;  /* food cards, verdict panels */
  --cmp-radius-pill: 999px;  /* buttons, dog/cat toggle, verdict chips */
  --cmp-rule: 1px;
}

/* Wordmark — "CanMyPet" heavy, "Eat" regular. Never re-weight, never letterspace. */
.cmp-wordmark {
  font-family: var(--cmp-font);
  font-weight: 800;
  letter-spacing: var(--cmp-wordmark-tracking);
  line-height: 1;
  color: var(--cmp-text);
  white-space: nowrap;
}
.cmp-wordmark span { font-weight: 400; }
.cmp-wordmark--on-ink { color: var(--cmp-text-on-ink); }

.cmp-tagline {
  font-family: var(--cmp-font);
  font-weight: 700;
  font-size: 0.26em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cmp-accent-deep);
}

/* The mark — Paw in the bowl.
   Percentages of one square, so 16px and 512px are one drawing. */
.cmp-mark {
  --cmp-mark: 64px;
  position: relative;
  flex: none;
  width: var(--cmp-mark);
  height: var(--cmp-mark);
  font-size: var(--cmp-mark);
  border-radius: 50%;
  overflow: hidden;
  background: var(--cmp-mist);
}
.cmp-mark > * { position: absolute; box-sizing: border-box; }

.cmp-mark__mound { left: 31%; top: 9%; width: 38%; height: 38%; border-radius: 50%; background: var(--cmp-caution); }
.cmp-mark__rim { left: 11%; top: 28%; width: 78%; height: 11%; border-radius: 999px; background: var(--cmp-ink); }
.cmp-mark__bowl { left: 17%; top: 37%; width: 66%; height: 32%; background: var(--cmp-ink); clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%); }
.cmp-mark__base { left: 29%; top: 67%; width: 42%; height: 8%; border-radius: 999px; background: var(--cmp-ink); }
.cmp-mark__toe-1 { left: 29.5%; top: 43%; width: 9%; height: 11%; border-radius: 50%; background: var(--cmp-verdict, var(--cmp-safe)); transform: rotate(-20deg); }
.cmp-mark__toe-2 { left: 40.5%; top: 39.5%; width: 9%; height: 11.5%; border-radius: 50%; background: var(--cmp-verdict, var(--cmp-safe)); }
.cmp-mark__toe-3 { left: 50.5%; top: 39.5%; width: 9%; height: 11.5%; border-radius: 50%; background: var(--cmp-verdict, var(--cmp-safe)); }
.cmp-mark__toe-4 { left: 61.5%; top: 43%; width: 9%; height: 11%; border-radius: 50%; background: var(--cmp-verdict, var(--cmp-safe)); transform: rotate(20deg); }
.cmp-mark__pad { left: 39%; top: 51%; width: 22%; height: 17%; border-radius: 46% 46% 38% 38%; background: var(--cmp-verdict, var(--cmp-safe)); }

/* The verdict states — recolour the paw, never the bowl. */
.cmp-mark--safe    { --cmp-verdict: var(--cmp-safe); }
.cmp-mark--caution { --cmp-verdict: var(--cmp-caution); }
.cmp-mark--toxic   { --cmp-verdict: var(--cmp-toxic); }

/* On the dark ground the bowl inverts; the paw holds its verdict colour. */
.cmp-mark--on-ink { background: #241d18; }
.cmp-mark--on-ink .cmp-mark__rim { background: var(--cmp-ground); }
.cmp-mark--on-ink .cmp-mark__bowl { background: var(--cmp-ground); }
.cmp-mark--on-ink .cmp-mark__base { background: var(--cmp-ground); }

/* One color, for embroidery, foil and single-plate print. */
.cmp-mark--mono { background: var(--cmp-text); }
.cmp-mark--mono > * { background: var(--cmp-text-on-ink); }

/* Below 32px. */
.cmp-mark--simple .cmp-mark__base { display: none; }
.cmp-mark--simple .cmp-mark__mound { left: 29%; top: 11%; width: 42%; height: 40%; }
.cmp-mark--simple .cmp-mark__rim { left: 8%; top: 30%; width: 84%; height: 13%; }
.cmp-mark--simple .cmp-mark__bowl { left: 15%; top: 41%; width: 70%; height: 34%; }
.cmp-mark--simple .cmp-mark__toe-1 { left: 28%; top: 44%; width: 11%; height: 13%; }
.cmp-mark--simple .cmp-mark__toe-2 { left: 39.5%; top: 40%; width: 11%; height: 13.5%; }
.cmp-mark--simple .cmp-mark__toe-3 { left: 50%; top: 40%; width: 11%; height: 13.5%; }
.cmp-mark--simple .cmp-mark__toe-4 { left: 61%; top: 44%; width: 11%; height: 13%; }
.cmp-mark--simple .cmp-mark__pad { left: 38%; top: 53%; width: 24%; height: 18%; }

/* Lockups. Clear space on every side = 25% of the mark. */
.cmp-lockup {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 32px;
  text-decoration: none;
}
.cmp-lockup .cmp-mark { --cmp-mark: 1.15em; }
.cmp-lockup__text { display: flex; flex-direction: column; gap: 0.16em; }
.cmp-lockup .cmp-wordmark { font-size: 1em; }
.cmp-lockup--stacked { flex-direction: column; align-items: flex-start; gap: 0.5em; }

/* Site chrome */
.cmp-header {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 24px;
  background: var(--cmp-white);
  border-bottom: var(--cmp-rule) solid color-mix(in srgb, var(--cmp-text) 16%, transparent);
}
.cmp-header__nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-family: var(--cmp-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cmp-text-muted);
}
.cmp-band { background: var(--cmp-mist); }
.cmp-footer { background: #241d18; color: var(--cmp-muted-on-ink); }
.cmp-rule { height: var(--cmp-rule); border: 0; margin: 0; background: color-mix(in srgb, var(--cmp-text) 16%, transparent); }
.cmp-card {
  background: var(--cmp-white);
  border: var(--cmp-rule) solid color-mix(in srgb, var(--cmp-text) 12%, transparent);
  border-radius: var(--cmp-radius-card);
  padding: 20px;
}
.cmp-input {
  font-family: var(--cmp-font);
  font-size: 16px;
  padding: 12px 16px;
  border: var(--cmp-rule) solid color-mix(in srgb, var(--cmp-text) 22%, transparent);
  border-radius: var(--cmp-radius);
  background: var(--cmp-white);
  color: var(--cmp-text);
}
.cmp-input:focus-visible { outline: 2px solid var(--cmp-safe); outline-offset: 2px; }

/* The emergency notice — ink on caution, never on toxic red. */
.cmp-alert {
  padding: 14px 18px;
  border-radius: var(--cmp-radius);
  background: color-mix(in srgb, var(--cmp-caution) 26%, var(--cmp-white));
  border: var(--cmp-rule) solid color-mix(in srgb, var(--cmp-caution) 60%, transparent);
  font-family: var(--cmp-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cmp-text);
}

/* Buttons and verdict chips */
.cmp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: var(--cmp-font);
  font-size: 15px;
  font-weight: 700;
  border: var(--cmp-rule) solid var(--cmp-text);
  border-radius: var(--cmp-radius-pill);
  background: var(--cmp-text);
  color: var(--cmp-text-on-ink);
  text-decoration: none;
  cursor: pointer;
}
.cmp-btn:hover { background: #17120e; }
.cmp-btn:active { background: #0e0a07; }
.cmp-btn:focus-visible { outline: 2px solid var(--cmp-safe); outline-offset: 2px; }
.cmp-btn--secondary { background: transparent; color: var(--cmp-text); }
.cmp-btn--secondary:hover { background: var(--cmp-mist); }

.cmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--cmp-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--cmp-radius-pill);
  background: var(--cmp-mist);
  color: var(--cmp-text);
}
.cmp-chip--safe    { background: color-mix(in srgb, var(--cmp-safe) 20%, var(--cmp-white)); color: var(--cmp-accent-deep); }
.cmp-chip--caution { background: color-mix(in srgb, var(--cmp-caution) 26%, var(--cmp-white)); color: #8a6212; }
.cmp-chip--toxic   { background: color-mix(in srgb, var(--cmp-toxic) 16%, var(--cmp-white)); color: #93301f; }

/* Links + selection */
a { color: var(--cmp-text); text-decoration-color: var(--cmp-safe); }
a:hover { color: var(--cmp-accent-deep); }
::selection { background: var(--cmp-mist); color: var(--cmp-text); }