/* Design tokens shared by the marketing page and the app.
   The palette follows viktorcessan.com: warm off-white surfaces, near-black ink, the gold accent, DM Serif Display
   for headings and DM Sans for text. The card illustrations bring the colour, so the interface stays quiet.
   The five orientation colours are the first five slots of a validated categorical palette, in that order. */

@import url('../fonts/fonts.css');

:root {
  color-scheme: light;
  --bg: #f6f5f2;
  --bg-deep: #efede8;
  --surface: #ffffff;
  --panel: #f0efec;
  --panel-2: #e8e7e3;
  --ink: #1a1a1f;
  --text-2: #52514d;
  --muted: #8a8983;
  --line: rgba(26, 26, 31, 0.08);
  --line-strong: rgba(26, 26, 31, 0.16);
  --accent: #9a7b2e;
  --accent-ink: #7a611f;
  --accent-soft: rgba(154, 123, 46, 0.1);
  --accent-wash: #f6f1e2;
  --focus: rgba(154, 123, 46, 0.35);

  --good: #2e7d4f;
  --good-soft: #e5f1e9;
  --partly: #a46b12;
  --partly-soft: #f8eedb;
  --bad: #b23b3b;
  --bad-soft: #f7e6e6;

  --o-explore: #2a78d6;
  --o-achieve: #eb6834;
  --o-community: #1baf7a;
  --o-security: #eda100;
  --o-meaning: #e87ba4;
  --pair-a: #2a78d6;
  --pair-b: #eb6834;
  --chart-grid: #e1e0d9;
  --chart-axis: #c3c2b7;

  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --shadow-1: 0 1px 2px rgba(26, 26, 31, 0.06), 0 1px 1px rgba(26, 26, 31, 0.03);
  --shadow-2: 0 2px 6px rgba(26, 26, 31, 0.05), 0 12px 32px -8px rgba(26, 26, 31, 0.12);
  --shadow-3: 0 4px 12px rgba(26, 26, 31, 0.06), 0 24px 60px -12px rgba(26, 26, 31, 0.22);
  --shadow-card: 0 1px 1px rgba(26, 26, 31, 0.07), 0 2px 4px rgba(26, 26, 31, 0.04), 0 10px 24px -8px rgba(26, 26, 31, 0.18);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
::selection { background: var(--ink); color: #fff; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}