/* Tam Ta brand tokens — drop into any app */
:root {
  /* Brand palette */
  --tt-blue: #1F3A5F;        /* primary — headers, brand surfaces */
  --tt-slate: #3D5A7E;      /* secondary — muted UI on blue */
  --tt-clay: #C2703D;        /* accent — ONE thing per screen */
  --tt-sand: #E8D9BC;        /* light brand tone, highlights on blue */
  --tt-ink: #17150F;          /* body text on light */
  --tt-paper: #FBFAF7;      /* light background */
  --tt-line: #DDD8CF;        /* hairline borders */
  --tt-muted: #6B675F;       /* secondary text */

  /* Dark mode default tokens */
  --tt-bg: #152538;
  --tt-surface: #1A2F4A;
  --tt-text: #FBFAF7;
  --tt-text-muted: #9AABBF;
  --tt-heading: #E8D9BC;
  --tt-link: #E8D9BC;
  --tt-border: #2F4A6B;

  --tt-font-display: 'Space Grotesk', Helvetica, sans-serif;
  --tt-font-mono: 'IBM Plex Mono', monospace;

  --tt-radius: 10px;
}
/* Google Fonts:
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
*/
body { background: var(--tt-bg); color: var(--tt-text); font-family: var(--tt-font-display); }
a { color: var(--tt-link); } a:hover { color: var(--tt-clay); }