/* ============================================================
   TERRAMAPPA · DESIGN TOKENS
   The single source of truth for the visual system.
   Lifted from the Brand & Design Guide v1.0 (the Cartographer's Palette)
   and extended into a full UI system: spacing, radii, elevation, motion.
   ============================================================ */

:root{
  /* ---- Foundation ---- */
  --tm-ink:#10202B;          /* Cartographer's Ink — primary text, logo, authority */
  --tm-ink-soft:#22323D;
  --tm-vellum:#F3EDDF;       /* the canvas — default background */
  --tm-vellum-2:#EAE2D0;
  --tm-paper:#FBF8F1;        /* raised surfaces — cards, sheets, inputs */

  /* ---- The Territory — accents ---- */
  --tm-terra:#C0592B;        /* the land — primary action, energy, focus */
  --tm-terra-deep:#9C4620;   /* text-safe terra */
  --tm-terra-tint:#F3E1D6;   /* terra wash — backgrounds, hovers */
  --tm-teal:#1C6E68;         /* the sea — links, provenance, calm, info */
  --tm-teal-deep:#114A46;
  --tm-teal-tint:#D9E7E5;
  --tm-brass:#B98A2E;        /* instruments — beacons, AI-active, highlights */
  --tm-brass-light:#D2A341;
  --tm-brass-tint:#F0E6CC;
  --tm-meridian:#13313D;     /* deep panel / dark base */

  /* ---- Stone — warm neutral scale ---- */
  --tm-stone-0:#FBF8F1;
  --tm-stone-1:#E6DECC;
  --tm-stone-2:#C9C0AC;
  --tm-stone-3:#9A917D;
  --tm-stone-4:#6A6151;
  --tm-stone-5:#3A372F;

  /* ---- Semantic — system states ---- */
  --tm-success:#3E7D5A;      --tm-success-tint:#DCE8DF;
  --tm-warning:#B98A2E;      --tm-warning-tint:#F0E6CC;
  --tm-danger:#B23A2E;       --tm-danger-tint:#F2DBD7;
  --tm-info:#1C6E68;         --tm-info-tint:#D9E7E5;

  /* ---- Surface roles (themeable) ---- */
  --tm-bg:var(--tm-vellum);
  --tm-surface:var(--tm-paper);
  --tm-surface-2:var(--tm-vellum-2);
  --tm-text:var(--tm-ink);
  --tm-text-soft:var(--tm-ink-soft);
  --tm-text-muted:var(--tm-stone-4);
  --tm-border:rgba(16,32,43,.14);
  --tm-border-strong:rgba(16,32,43,.30);
  --tm-focus:rgba(192,89,43,.40);   /* terra focus ring */

  /* ---- Typography ---- */
  --tm-font-display:'Quicksand', ui-rounded, system-ui, sans-serif;
  --tm-font-ui:'Plus Jakarta Sans', system-ui, sans-serif;
  --tm-font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --tm-text-xs:11px;
  --tm-text-sm:12.5px;
  --tm-text-base:14px;
  --tm-text-md:15px;
  --tm-text-lg:18px;
  --tm-text-xl:22px;
  --tm-text-2xl:28px;
  --tm-text-3xl:38px;
  --tm-text-4xl:clamp(40px, 6vw, 68px);

  --tm-leading-tight:1.12;
  --tm-leading:1.55;
  --tm-tracking-eyebrow:.22em;

  /* ---- Spacing (4px base grid) ---- */
  --tm-1:4px;  --tm-2:8px;  --tm-3:12px; --tm-4:16px;
  --tm-5:20px; --tm-6:24px; --tm-8:32px; --tm-10:40px;
  --tm-12:48px; --tm-16:64px; --tm-20:80px; --tm-24:96px;

  /* ---- Radii — rounded, never sharp ---- */
  --tm-radius-sm:6px;
  --tm-radius:10px;
  --tm-radius-lg:16px;
  --tm-radius-xl:22px;
  --tm-radius-pill:999px;

  /* ---- Elevation — one soft, warm ink shadow ---- */
  --tm-shadow-sm:0 1px 2px rgba(16,32,43,.06), 0 1px 1px rgba(16,32,43,.04);
  --tm-shadow:0 6px 16px -8px rgba(16,32,43,.22);
  --tm-shadow-lg:0 18px 40px -20px rgba(16,32,43,.45);
  --tm-shadow-ring:0 0 0 4px var(--tm-focus);

  /* ---- Motion — surveyed, calm ---- */
  --tm-ease:cubic-bezier(.22,.61,.36,1);
  --tm-ease-out:cubic-bezier(.16,1,.3,1);
  --tm-fast:120ms;
  --tm-base:220ms;
  --tm-slow:420ms;

  --tm-maxw:1180px;
}

/* ============================================================
   DARK MODE — "Night Survey"
   Surfaces step ink → meridian → deeper; accents brighten one stop;
   vellum becomes the type colour.
   ============================================================ */
[data-theme="dark"]{
  --tm-bg:#0C1820;
  --tm-surface:#13313D;
  --tm-surface-2:#1B3F4C;
  --tm-text:#F3EDDF;
  --tm-text-soft:rgba(243,237,223,.80);
  --tm-text-muted:rgba(243,237,223,.55);
  --tm-border:rgba(243,237,223,.14);
  --tm-border-strong:rgba(243,237,223,.28);

  --tm-terra:#D9743F;
  --tm-terra-deep:#E68A55;
  --tm-terra-tint:rgba(217,116,63,.16);
  --tm-teal:#3FA095;
  --tm-teal-tint:rgba(63,160,149,.16);
  --tm-brass:#D2A341;
  --tm-brass-light:#E1BC63;
  --tm-brass-tint:rgba(210,163,65,.16);

  --tm-success:#5FA77C; --tm-success-tint:rgba(95,167,124,.16);
  --tm-warning:#D2A341; --tm-warning-tint:rgba(210,163,65,.16);
  --tm-danger:#D45A4C;  --tm-danger-tint:rgba(212,90,76,.16);
  --tm-info:#3FA095;    --tm-info-tint:rgba(63,160,149,.16);

  --tm-stone-3:rgba(243,237,223,.45);
  --tm-stone-4:rgba(243,237,223,.62);
  --tm-focus:rgba(217,116,63,.45);
  --tm-shadow:0 8px 22px -10px rgba(0,0,0,.6);
  --tm-shadow-lg:0 22px 50px -22px rgba(0,0,0,.7);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}