/* Likemind design tokens
   Concept: two arches on one shared pillar (the logo). Blue (you) + gold (them) = green (what you share).
   Layout: signed-in shell = left rail | content column (≈640px) | suggestions rail; phones get top bar + bottom tabs. */

:root {
  /* neutrals, biased slightly toward green-teal */
  --paper: #edf1ef;
  --surface: #fbfcfb;
  --sunk: #e3e9e6;
  --line: #cfd8d4;
  --line-soft: #dde4e1;
  --ink: #13201e;
  --ink-2: #435350;
  --ink-3: #66756f;

  /* brand */
  --cobalt: #3344d0;
  --cobalt-hover: #2735b3;
  --on-cobalt: #ffffff;
  --cobalt-soft: #e0e4fb;
  --marigold: #e5a223;
  --marigold-soft: #fbecc9;
  --overlap: #24734f;
  --overlap-soft: #d5ecdf;

  /* semantic */
  --danger: #b3372e;
  --danger-soft: #f8dedb;
  --heart: #d23a63;

  /* category hues for chips (text on soft fill) */
  --cat-interests: #3344d0;  --cat-interests-bg: #e3e7fc;
  --cat-topics: #7a4fb8;     --cat-topics-bg: #ece4f8;
  --cat-values: #9a5d06;     --cat-values-bg: #fbedcd;
  --cat-goals: #a33b4f;      --cat-goals-bg: #f7e0e5;
  --cat-communities: #1f6a7a; --cat-communities-bg: #dbeef2;

  /* avatars */
  --av1: #cbd2fa; --av2: #f5dea2; --av3: #c0e1cf; --av4: #f3cbc3; --av5: #dacdf0; --av6: #c6e3ea;
  --av-ink: #13201e;

  --shadow-1: 0 1px 2px rgb(19 32 30 / 0.05), 0 2px 10px rgb(19 32 30 / 0.04);
  --shadow-2: 0 2px 4px rgb(19 32 30 / 0.06), 0 12px 32px rgb(19 32 30 / 0.10);
  --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--cobalt);

  /* type */
  --f-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --f-body: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-xs: 0.75rem;
  --t-s: 0.84375rem;
  --t-base: 0.96875rem;
  --t-m: 1.125rem;
  --t-l: 1.5rem;
  --t-xl: 2.125rem;
  --t-2xl: clamp(2.5rem, 5.4vw, 4.25rem);

  /* shape + motion */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  --rail-w: 248px;
  --side-w: 300px;
  --content-w: 640px;
  --topbar-h: 58px;
  --tabbar-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1413; --surface: #141d1c; --sunk: #1b2625; --line: #2a3735; --line-soft: #222e2c;
    --ink: #e6ecea; --ink-2: #b2bfbb; --ink-3: #85938e;
    --cobalt: #8d9bff; --cobalt-hover: #a8b3ff; --on-cobalt: #0d1413; --cobalt-soft: #232a5a;
    --marigold: #f2c058; --marigold-soft: #3b2f13;
    --overlap: #6fcb9e; --overlap-soft: #163427;
    --danger: #f08a80; --danger-soft: #3d1a17; --heart: #ff7a9b;
    --cat-interests: #a7b2ff; --cat-interests-bg: #222a55;
    --cat-topics: #c9a8f5; --cat-topics-bg: #2f2347;
    --cat-values: #f2c467; --cat-values-bg: #3a2c10;
    --cat-goals: #f4a3b3; --cat-goals-bg: #43202a;
    --cat-communities: #8dd6e4; --cat-communities-bg: #15363e;
    --av1: #2e376f; --av2: #5a4513; --av3: #1e4936; --av4: #5a2b26; --av5: #3e3260; --av6: #1e4550;
    --av-ink: #eef2f0;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-2: 0 12px 32px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0d1413; --surface: #141d1c; --sunk: #1b2625; --line: #2a3735; --line-soft: #222e2c;
  --ink: #e6ecea; --ink-2: #b2bfbb; --ink-3: #85938e;
  --cobalt: #8d9bff; --cobalt-hover: #a8b3ff; --on-cobalt: #0d1413; --cobalt-soft: #232a5a;
  --marigold: #f2c058; --marigold-soft: #3b2f13;
  --overlap: #6fcb9e; --overlap-soft: #163427;
  --danger: #f08a80; --danger-soft: #3d1a17; --heart: #ff7a9b;
  --cat-interests: #a7b2ff; --cat-interests-bg: #222a55;
  --cat-topics: #c9a8f5; --cat-topics-bg: #2f2347;
  --cat-values: #f2c467; --cat-values-bg: #3a2c10;
  --cat-goals: #f4a3b3; --cat-goals-bg: #43202a;
  --cat-communities: #8dd6e4; --cat-communities-bg: #15363e;
  --av1: #2e376f; --av2: #5a4513; --av3: #1e4936; --av4: #5a2b26; --av5: #3e3260; --av6: #1e4550;
  --av-ink: #eef2f0;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-2: 0 12px 32px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}