/* Topo Puzzles design tokens v1 (2026-09-30). Source of truth: brand/BRAND.md.
   Every value used by the site, the share card and the reel templates lives here.
   Reel values are px on the 1080 x 1920 canvas and are mirrored as constants in the
   Python reel builders; change both together. */

:root {
  /* ---------- color: core (paper, map, ink) ---------- */
  --tp-paper: #F6F1E5;          /* page background, reel background */
  --tp-paper-raised: #FBF8F1;   /* cards and pickers sitting on paper */
  --tp-paper-sunk: #EDE6D4;     /* wells, hover fills, disabled fills */
  --tp-map: #FFFFFF;            /* map field only (and the bullseye ring) */
  --tp-rule: #DCD3BF;           /* hairlines and dividers on paper */
  --tp-rule-strong: #B3A993;    /* decorative outlines, segment dividers (2.1:1, not a component boundary) */
  --tp-ink: #1A1A1A;            /* headlines, body, primary button fill */
  --tp-ink-map: #3D3D3D;        /* map line work, index contours, secondary text on sunk */
  --tp-ink-soft: #6E695F;       /* kicker, captions, meta; AA on paper/raised/white only */
  --tp-ink-faint: #8F897C;      /* input borders, placeholders, disabled text, miss outline; never body text */
  --tp-panel-border: #2B2B2B;   /* frame around map + view panels */
  --tp-contour-minor: #A8A8A8;  /* 10 m contours on the map (pipeline) */
  --tp-contour-index: #3D3D3D;  /* labelled 50 m index contours (pipeline) */

  /* ---------- color: accent (drawn from the map + 3D views) ---------- */
  --tp-marker: #C0392B;         /* "you are here" bullseye + wordmark dot. Never text, never score, never error */
  --tp-marker-deep: #A32E22;    /* marker on hover/pressed surfaces */
  --tp-marker-reverse: #E0533F; /* wordmark dot on ink */
  --tp-sky-top: #6395C1;        /* 3D view zenith */
  --tp-sky: #93B7D5;            /* 3D view horizon */
  --tp-haze: #CCDEEB;           /* 3D view horizon haze band */
  --tp-meadow: #577742;         /* 3D view lit grass */
  --tp-forest: #3D4F34;         /* 3D view shaded slope */
  --tp-olive: #626239;          /* 3D view dry slope */
  --tp-tan: #B1A47B;            /* 3D view bare ridge / rock */
  --tp-lake: #2C5D88;           /* focus ring, link hover, selected-state outline */

  /* ---------- color: score tiers (color-blind safe; always paired with glyph + number) ---------- */
  --tp-score-summit: #1F4F7A;      --tp-score-summit-text: #FFFFFF;   /* 90-100 pts  glyph ▲ */
  --tp-score-ridge: #D8901C;       --tp-score-ridge-text: #1A1A1A;    /* 40-89 pts   glyph ◭ */
  --tp-score-foothill: #EAD8A2;    --tp-score-foothill-text: #1A1A1A; /* 1-39 pts    glyph △ */
  --tp-score-miss: transparent;    --tp-score-miss-text: #6E695F;     /* 0 pts       glyph · */
  --tp-score-miss-border: #8F897C;

  /* ---------- typography ---------- */
  --tp-font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tp-font-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tp-weight-regular: 400;
  --tp-weight-medium: 500;
  --tp-weight-semibold: 600;
  --tp-weight-bold: 700;

  /* web scale (rem at 16px). size / line-height */
  --tp-text-micro: 0.6875rem;  --tp-leading-micro: 1rem;      /* 11/16 map caption, legal */
  --tp-text-caption: 0.75rem;  --tp-leading-caption: 1rem;    /* 12/16 chip labels, meta */
  --tp-text-sm: 0.875rem;      --tp-leading-sm: 1.25rem;      /* 14/20 kicker, helper text */
  --tp-text-base: 1rem;        --tp-leading-base: 1.5rem;     /* 16/24 body */
  --tp-text-lg: 1.125rem;      --tp-leading-lg: 1.75rem;      /* 18/28 lead paragraph, level line */
  --tp-text-xl: 1.375rem;      --tp-leading-xl: 1.75rem;      /* 22/28 h3, prompt on mobile */
  --tp-text-2xl: 1.75rem;      --tp-leading-2xl: 2.125rem;    /* 28/34 h2, prompt on desktop */
  --tp-text-3xl: 2.25rem;      --tp-leading-3xl: 2.5rem;      /* 36/40 h1, total score */
  --tp-text-4xl: 3rem;         --tp-leading-4xl: 3.25rem;     /* 48/52 display "Map 11" */
  --tp-tracking-caps: 0.01em;     /* ALL CAPS prompts */
  --tp-tracking-tight: -0.01em;   /* display + wordmark */
  --tp-tracking-label: 0.06em;    /* small caps labels ("LEVEL", "SCORE") */

  /* reel scale (px on 1080 x 1920). First four match the current Map 11 reels exactly. */
  --tp-reel-kicker: 34px;          /* regular, ink-soft, line 42 */
  --tp-reel-headline: 54px;        /* bold caps, line 62, one line, <= 28 characters */
  --tp-reel-headline-long: 48px;   /* bold sentence case, line 56, two lines max */
  --tp-reel-level: 40px;           /* bold, line 48 */
  --tp-reel-marker-label: 38px;    /* A-D labels on the map (as now) */
  --tp-reel-grid-label: 30px;      /* A-J / 1-10 grid labels (now ~24px) */
  --tp-reel-compass-label: 28px;   /* N, NE ... on the easy compass (now ~18px) */
  --tp-reel-caption: 22px;         /* "Contour interval 10 meters" (now ~11px) */

  /* ---------- spacing (4 px base) ---------- */
  --tp-space-0: 0;
  --tp-space-1: 4px;
  --tp-space-2: 8px;
  --tp-space-3: 12px;
  --tp-space-4: 16px;
  --tp-space-5: 24px;
  --tp-space-6: 32px;
  --tp-space-7: 48px;
  --tp-space-8: 64px;
  --tp-space-9: 96px;
  --tp-space-10: 128px;
  --tp-container: 1120px;        /* page max width */
  --tp-container-play: 720px;    /* play column (map panel max width) */
  --tp-gutter: 16px;             /* mobile side padding; 24px >= 640px */
  --tp-tap: 44px;                /* minimum touch target */

  /* reel geometry (px on 1080 x 1920) */
  --tp-reel-w: 1080px;
  --tp-reel-h: 1920px;
  --tp-reel-safe-top: 250px;
  --tp-reel-safe-bottom: 330px;
  --tp-reel-safe-left: 60px;
  --tp-reel-safe-right: 100px;
  --tp-reel-axis-x: 520px;          /* optical center of the safe area, not 540 */
  --tp-reel-panel-w: 780px;         /* map + view panels, every level: x 130-910 */
  --tp-reel-map-top: 490px;         /* map panel y 490-1270, every level */
  --tp-reel-view-top: 1290px;       /* view panel y 1290-1648 */
  --tp-reel-view-h: 358px;          /* 2.18:1, the current render ratio */
  --tp-reel-header-gap: 20px;       /* header block bottom (y 470) to map panel */
  --tp-reel-panel-gap: 20px;        /* map panel to view panel */
  --tp-reel-skyline-max: 1590px;    /* the view's skyline must sit above this y */
  --tp-reel-panel-border: 3px;
  --tp-reel-neatline-inset: 20px;   /* 1px inner frame inside the map panel */

  /* ---------- shape ---------- */
  --tp-radius-0: 0;          /* map + view panels: always square */
  --tp-radius-sm: 6px;       /* inputs inside pickers, tooltips */
  --tp-radius-md: 10px;      /* picker tiles */
  --tp-radius-lg: 16px;      /* cards, share card corners */
  --tp-radius-pill: 999px;   /* buttons, chips, email field */
  --tp-border-hair: 1px solid var(--tp-rule);
  --tp-border-input: 1.5px solid var(--tp-ink-faint);  /* 3.1:1 on paper, meets non-text contrast */
  --tp-border-panel: 2px solid var(--tp-panel-border);   /* web; reels use 3px */
  --tp-border-strong: 1.5px solid var(--tp-ink);

  /* ---------- elevation (warm, low; never on map panels) ---------- */
  --tp-shadow-1: 0 1px 2px rgba(43, 36, 20, 0.08), 0 1px 1px rgba(43, 36, 20, 0.04);
  --tp-shadow-2: 0 2px 4px rgba(43, 36, 20, 0.06), 0 8px 24px rgba(43, 36, 20, 0.10);
  --tp-shadow-3: 0 4px 8px rgba(43, 36, 20, 0.08), 0 20px 48px rgba(43, 36, 20, 0.16);
  --tp-focus-ring: 0 0 0 2px var(--tp-paper), 0 0 0 4px var(--tp-lake);

  /* ---------- z-index ---------- */
  --tp-z-base: 0;
  --tp-z-raised: 10;
  --tp-z-sticky: 100;
  --tp-z-header: 200;
  --tp-z-overlay: 900;
  --tp-z-modal: 1000;
  --tp-z-toast: 1100;

  /* ---------- motion ---------- */
  --tp-dur-instant: 80ms;    /* press feedback */
  --tp-dur-fast: 140ms;      /* hover, selection */
  --tp-dur-base: 220ms;      /* reveal of verdict card */
  --tp-dur-slow: 360ms;      /* score count-up step, page-level transitions */
  --tp-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tp-ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);

  /* ---------- motif ---------- */
  --tp-motif-url: url("logo/contour-pattern.svg");
  --tp-motif-size: 640px;
  --tp-motif-opacity: 1;     /* file already carries 16% / 30% stroke opacity */
  --tp-motif-clearance: 48px; /* minimum gap between motif and any map panel */
}

@media (min-width: 640px) {
  :root { --tp-gutter: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tp-dur-instant: 0ms;
    --tp-dur-fast: 0ms;
    --tp-dur-base: 0ms;
    --tp-dur-slow: 0ms;
  }
}

/* ---------- base ---------- */
.tp-base {
  margin: 0;
  background: var(--tp-paper);
  color: var(--tp-ink);
  font-family: var(--tp-font-sans);
  font-size: var(--tp-text-base);
  line-height: var(--tp-leading-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tp-base a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tp-base a:hover { color: var(--tp-lake); }
.tp-base :focus-visible { outline: none; box-shadow: var(--tp-focus-ring); border-radius: var(--tp-radius-sm); }

/* ---------- utilities ---------- */
.tp-container { max-width: var(--tp-container); margin-inline: auto; padding-inline: var(--tp-gutter); }
.tp-stack > * + * { margin-top: var(--tp-stack-gap, var(--tp-space-4)); }
.tp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-cluster-gap, var(--tp-space-3)); }

.tp-kicker { font-size: var(--tp-text-sm); line-height: var(--tp-leading-sm); color: var(--tp-ink-soft); font-weight: var(--tp-weight-regular); }
.tp-headline { font-size: var(--tp-text-2xl); line-height: var(--tp-leading-2xl); font-weight: var(--tp-weight-bold); margin: 0; }
.tp-headline--caps { text-transform: uppercase; letter-spacing: var(--tp-tracking-caps); }
.tp-level { font-size: var(--tp-text-lg); line-height: var(--tp-leading-lg); font-weight: var(--tp-weight-bold); }
.tp-display { font-size: var(--tp-text-4xl); line-height: var(--tp-leading-4xl); font-weight: var(--tp-weight-bold); letter-spacing: var(--tp-tracking-tight); }
.tp-label { font-size: var(--tp-text-caption); line-height: var(--tp-leading-caption); font-weight: var(--tp-weight-semibold); letter-spacing: var(--tp-tracking-label); text-transform: uppercase; color: var(--tp-ink-soft); }
.tp-caption { font-size: var(--tp-text-caption); line-height: var(--tp-leading-caption); color: var(--tp-ink-soft); }
.tp-mono { font-family: var(--tp-font-mono); font-variant-numeric: tabular-nums; }
.tp-num { font-variant-numeric: tabular-nums lining-nums; }

.tp-panel { background: var(--tp-map); border: var(--tp-border-panel); border-radius: var(--tp-radius-0); display: block; }
.tp-motif { background-image: var(--tp-motif-url); background-size: var(--tp-motif-size); background-repeat: repeat; }

.tp-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}