/* Design tokens: the only place colours, type, spacing and sizes are defined.
   Components in app.css use these variables, never raw values. */
:root {
  /* Surfaces & text */
  --c-bg: #fff8ec;
  --c-bg-deep: #fdecd2;
  --c-surface: #ffffff;
  --c-ink: #22313f;
  --c-ink-soft: #5a6b7b;
  --c-ink-faint: #8a98a6;
  --c-line: #eadfcf;
  --c-overlay: rgb(20 30 40 / 0.72);

  /* Brand */
  --c-primary: #127a57;
  --c-primary-deep: #0b5a40;
  --c-on-primary: #ffffff;
  --c-accent: #ffc93c;
  --c-accent-deep: #f2a900;
  --c-on-accent: #3b2a00;

  /* Feedback */
  --c-good: #2e9e4f;
  --c-good-soft: #dff5e5;
  --c-bad: #d7263d;
  --c-bad-soft: #fde2e5;

  /* Light and shade layered over other colours */
  --c-veil: rgb(255 255 255 / 0.9);
  --c-shine: rgb(255 255 255 / 0.45);
  --c-shine-soft: rgb(255 255 255 / 0.18);
  --c-shine-faint: rgb(255 255 255 / 0.12);
  --c-shade-faint: rgb(0 0 0 / 0.12);
  --c-shade: rgb(0 0 0 / 0.22);
  --c-shade-strong: rgb(0 0 0 / 0.4);

  /* Card pages, maps and packs */
  --c-paper: #fffdf6;
  --c-paper-line: #efe6d3;
  --c-map-sea: #d8eef6;
  --c-map-land: #9ccf8f;
  --c-map-spot: #d7263d;
  --c-map-glow: rgb(120 190 235 / 0.45);  /* thin atmosphere around the globe */
  --c-map-home: #ffcf3f;                  /* home country outline, above every layer */

  /* Globe map layers (js/layers.js). */
  --c-depth-1: #9fd0ec;   /* deeper than 200 m */
  --c-depth-2: #5ea7d8;   /* 2,000 m */
  --c-depth-3: #2f78bd;   /* 4,000 m */
  --c-depth-4: #1b4b8f;   /* 6,000 m and the deep trenches */
  --c-forest-tropical: #1e8f3e;
  --c-forest-temperate: #7fbf4d;
  --c-forest-boreal: #2f6b57;
  --c-reef: #ff6f91;
  --c-relief-low: #9cc47e;
  --c-relief-dry: #d8c38f;
  --c-relief-high: #f4f1ea;
  --c-night: #0b1430;
  --c-city-lights: #ffd27a;
  /* Temperature: °C and colour. scripts/make-layers.mjs paints the pictures with it. */
  --c-temp-scale: -30 #3b2a8f, -15 #2f6fd6, 0 #9ad8f5, 10 #74c77f, 20 #f3df55, 30 #f5973a, 40 #dd3f2a, 50 #8e1b3a;
  --c-callout: #ffc93c;
  --c-callout-ink: #3b2a00;
  --c-callout-soft: rgb(255 201 60 / 0.35);
  --c-tear: #ffffff;
  --c-scrim-light: rgb(20 30 40 / 0.45);

  /* Locked-card silhouette */
  --c-locked: #2c3640;
  --c-locked-ink: #c7d0d8;

  /* Group colours (binder tabs). --g-*-ink is the text colour on that background. */
  --g-mammals: #d7263d;          --g-mammals-ink: #ffffff;
  --g-birds: #1e78d2;            --g-birds-ink: #ffffff;
  --g-reptiles: #2b8f47;         --g-reptiles-ink: #ffffff;
  --g-fish: #00838f;             --g-fish-ink: #ffffff;
  --g-invertebrates: #f5b700;    --g-invertebrates-ink: #3b2a00;
  --g-prehistoric: #8b5e3c;      --g-prehistoric-ink: #ffffff;
  --g-microscopic: #8e44ad;      --g-microscopic-ink: #ffffff;
  --g-behavior: #c2307a;         --g-behavior-ink: #ffffff;
  --g-how-animals-work: #f17105; --g-how-animals-work-ink: #2e1400;
  --g-world-explorer: #3f51b5;   --g-world-explorer-ink: #ffffff;
  --g-conservation: #7cb342;     --g-conservation-ink: #1d2e0b;
  --g-plants: #2f6f1f;           --g-plants-ink: #ffffff;

  /* Profile avatars: a letter on one of these (borrowed from the group colours). */
  --avatar-1: var(--g-mammals);          --avatar-1-ink: var(--g-mammals-ink);
  --avatar-2: var(--g-birds);            --avatar-2-ink: var(--g-birds-ink);
  --avatar-3: var(--g-reptiles);         --avatar-3-ink: var(--g-reptiles-ink);
  --avatar-4: var(--g-how-animals-work); --avatar-4-ink: var(--g-how-animals-work-ink);
  --avatar-5: var(--g-microscopic);      --avatar-5-ink: var(--g-microscopic-ink);
  --avatar-6: var(--g-fish);             --avatar-6-ink: var(--g-fish-ink);
  --avatar-7: var(--g-behavior);         --avatar-7-ink: var(--g-behavior-ink);
  --avatar-8: var(--g-world-explorer);   --avatar-8-ink: var(--g-world-explorer-ink);

  /* Badge tiers (data/badges.json). A new tier needs its own --tier-<id> pair here. */
  --tier-bronze: #c9813f;  --tier-bronze-ink: #2e1606;
  --tier-silver: #c3ccd5;  --tier-silver-ink: #1f2a35;
  --tier-gold: #f4c534;    --tier-gold-ink: #3b2a00;
  --c-secret: #2c3640;     --c-secret-ink: #ffc93c;   /* the "?" of a secret badge */

  /* Field Notes notebook (also read by js/notes-render.js for the page canvas) */
  --nb-kraft: #b98b5e;      --nb-kraft-deep: #8f6a45;   --nb-kraft-ink: #3b2a1a;
  --nb-paper: #fbf7ec;      --nb-dot: #c9bfa8;          --nb-grid: #e6dfcf;
  --nb-ink: #3d3a35;        --nb-stamp: #c0392b;        --nb-tape: rgb(236 222 176 / 0.78);
  --nb-photo-edge: #ffffff; --nb-shadow: rgb(40 30 20 / 0.28);
  /* Coloured pencils */
  --pencil-graphite: #4a4a4a; --pencil-red: #d7263d;   --pencil-orange: #f17105; --pencil-yellow: #e6a800;
  --pencil-green: #2b8f47;    --pencil-blue: #1e78d2;  --pencil-purple: #8e44ad; --pencil-brown: #8b5e3c;

  /* IUCN Red List badge colours (the Red List's own palette) */
  --iucn-ex: #000000;  --iucn-ex-ink: #ff5a5a;
  --iucn-ew: #542344;  --iucn-ew-ink: #ffffff;
  --iucn-cr: #d81e05;  --iucn-cr-ink: #ffffff;
  --iucn-en: #fc7f3f;  --iucn-en-ink: #2b1100;
  --iucn-vu: #f9e814;  --iucn-vu-ink: #2b2700;
  --iucn-nt: #cce226;  --iucn-nt-ink: #1f2600;
  --iucn-lc: #60c659;  --iucn-lc-ink: #0d2a0b;
  --iucn-dd: #d1d1c6;  --iucn-dd-ink: #2a2a24;
  --iucn-ne: #ffffff;  --iucn-ne-ink: #2a2a24;

  /* Type */
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto,
          "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-zh: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", ui-rounded, system-ui, sans-serif;
  --fs-xs: 0.85rem;
  --fs-sm: 1rem;
  --fs-md: 1.2rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-xxl: clamp(2rem, 5vw, 3rem);
  --fw-bold: 800;
  --fw-semi: 650;
  --lh: 1.45;

  /* Space (4px scale) */
  --s-hair: 2px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Border widths */
  --bw-thin: 2px;
  --bw-mid: 3px;
  --bw-focus: 3px;
  --bw-thick: 4px;
  --bw-tile: 5px;
  --border-card: 6px;
  --bw-heavy: 8px;

  /* Sizes */
  --tap: 56px;          /* minimum tap target for little fingers */
  --tap-lg: 72px;
  --tap-sm: 48px;       /* secondary controls (credit line) */
  --tap-xs: 44px;       /* badges and squeezed controls on phones */
  --legend-sw: 14px;    /* colour squares in the Globe legend */
  --header-h-base: 68px;
  --header-h-stacked: 84px; /* tablets: nav labels under their icons (app.css) */
  --header-h-compact: 56px;
  --header-h: var(--header-h-base);
  --nav-h: 64px;        /* the bottom tab bar on phones */
  --size-brand: 44px;
  --size-brand-sm: 38px;
  --size-dot: 36px;     /* numbered fact circles, IUCN code */
  --size-dot-lg: 40px;  /* "?" on locked cards */
  --size-thumb: 72px;
  --size-medal: 112px;
  --size-medal-lg: 190px;
  --size-avatar: 44px;      /* in the header */
  --size-avatar-lg: 112px;  /* profile picker */
  --picker-item: 160px;
  --emoji-sm: 2.6rem;
  --emoji-md: 3.4rem;
  --emoji-lg: 4.5rem;
  --emoji-xl: 6rem;
  --emoji-xxl: 8rem;
  --meter-h: 14px;
  --rings-w: 22px;      /* binder ring holes down the page edge */
  --tab-min: 96px;
  --sheet-w: 520px;
  --flip-w: 340px;
  --choice-min: 260px;
  --choice-h: 220px;
  --feedback-min: 180px;
  --quiz-pic-min: 200px;

  /* Card design size: pages are laid out at this size and the whole card is scaled to fit. */
  --card-w: 400px;
  --card-h: 560px;
  --card-fs: 15px;      /* body text on card pages */
  --card-fs-sm: 12px;
  --card-fs-title: 19px;
  --card-fs-name: 30px;
  --zy-ratio: 0.36;     /* zhuyin size, as a share of the character beside it */
  --zy-gap: 0.04em;     /* between a character and its zhuyin column */
  --spot: 10px;         /* map location dot */
  --callout-dot: 26px;  /* numbered steps, IUCN code on card pages */
  --hotspot: 24px;      /* numbered bubbles in the Profile list */
  --map-marker: 8px;    /* range marker on the little world map */
  --gpin: 52px;         /* photo pins on the Globe */
  --gsheet-pic: min(38dvh, 320px); /* photo in the Globe card sheet */
  --cmp-icon: 44px;     /* figures on the weight balance */
  --cmp-icon-sm: 18px;  /* … when there are many */
  --life-bar: 22px;
  --plate: 140px;
  --compare-h: 150px;   /* height of the size-comparison scene */
  --compare-look-h: 110px; /* … and of the lookalike scene, which also lists differences */

  /* Foil packs */
  --pack-w: min(72vw, 300px, 46dvh);
  --pack-strip: 15%;    /* top strip you cut off, as a share of pack height */
  --pack-w-sm: min(46vw, 210px, 32dvh); /* sealed packs waiting on the Packs page */
  --summary-tile: 170px; /* cards in the after-the-pack summary */

  /* Zoom into a card: how much the binder grows and blurs behind it */
  --zoom-bg-scale: 0.4;
  --zoom-bg-blur: 4px;
  --tabs-w: 176px;      /* binder tab column in landscape */
  --tile-min: 150px;
  --tile-min-lg: 190px;
  --content-max: 1200px;

  /* Elevation */
  --shadow-1: 0 2px 6px rgb(60 40 10 / 0.12);
  --shadow-2: 0 6px 18px rgb(60 40 10 / 0.18);
  --shadow-3: 0 16px 40px rgb(20 20 20 / 0.35);
  --shadow-up: 0 -2px 10px rgb(60 40 10 / 0.1);

  /* Motion */
  --t-fast: 120ms;
  --t-med: 260ms;
  --t-slow: 700ms;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}