/* literally: design tokens. Colors and shapes from the Ocean Edition #1 crayon drawings and the tee mockups
   (tygerlabs-marketing merch/animal-kids/DESIGN.md and design/literally-tokens.css, 17 Oct 2026). */
:root {
  color-scheme: light;

  /* paper and crayon black */
  --paper: #ffffff;
  --crayon-black: #1e1e1e;
  --pencil: #6e6b69;
  --shark-grey: #a7a3a2;
  --paper-shade: #f6f5f3;

  /* crayon colors, one per animal; -ink shades are the text-safe ones (WCAG AA on white) */
  --water-blue: #488cc4;
  --water-blue-ink: #2e6ea6;
  --water-blue-light: #9dc0dc;
  --sea-green: #327f3c;
  --sea-green-ink: #295728;
  --sea-green-light: #a9cfa4;
  --sun-yellow: #dfca3d;
  --sun-yellow-light: #e8da60;
  --mane-orange: #e9952b;
  --mane-orange-ink: #cc7126;
  --mane-orange-light: #f3c48a;
  --lion-brown: #834f32;

  /* type */
  --hand: "Patrick Hand", "Comic Neue", "Chalkboard SE", "Marker Felt", cursive;
  --body: "Nunito", "Avenir Next Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-base: 1.125rem;      /* 18px */
  --text-small: 1rem;         /* 16px, the smallest size on the website */
  --leading: 1.55;
  --h1: clamp(2.5rem, 6vw + 0.5rem, 4.25rem);
  --h2: clamp(2rem, 3.5vw + 0.5rem, 2.75rem);
  --h3: clamp(1.5rem, 2vw + 0.5rem, 1.875rem);

  /* space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --wrap: 1180px;
  --measure: 66ch;

  /* shape: one button and card shape, slightly wobbly */
  --radius: 14px 18px 12px 20px / 18px 12px 20px 14px;
  --radius-small: 8px 11px 7px 12px / 11px 7px 12px 8px;
  --line: 2.5px solid var(--crayon-black);
  --line-thin: 2px solid var(--crayon-black);

  /* the crayon of the moment; product cards and sections set their own */
  --crayon: var(--water-blue);
  --crayon-ink: var(--water-blue-ink);
  --crayon-light: var(--water-blue-light);
}

.crayon-blue   { --crayon: var(--water-blue);  --crayon-ink: var(--water-blue-ink);  --crayon-light: var(--water-blue-light); }
.crayon-green  { --crayon: var(--sea-green);   --crayon-ink: var(--sea-green-ink);   --crayon-light: var(--sea-green-light); }
.crayon-yellow { --crayon: var(--sun-yellow);  --crayon-ink: var(--lion-brown);      --crayon-light: var(--sun-yellow-light); }
.crayon-orange { --crayon: var(--mane-orange); --crayon-ink: var(--lion-brown);      --crayon-light: var(--mane-orange-light); }