/* CrossPost design tokens.
   Warm paper and ink rather than cold white and gray: the product writes on
   behalf of an office, so it borrows from letterhead. One ink-blue accent,
   used sparingly. Dark mode is its own palette, not an inversion. */

:root {
  --bg: #f6f5f1;
  --bg-sunken: #efede7;
  --surface: #fffefb;
  --surface-raised: #ffffff;
  --fill: rgba(64, 52, 30, 0.055);
  --fill-strong: rgba(64, 52, 30, 0.1);
  --separator: rgba(48, 38, 20, 0.11);
  --separator-strong: rgba(48, 38, 20, 0.2);

  --text: #1c1b18;
  --text-2: #66625a;
  --text-3: #98938a;

  --accent: #2b4ea2;
  --accent-hover: #24438c;
  --accent-ink: #ffffff;
  --accent-soft: rgba(43, 78, 162, 0.09);
  --accent-soft-strong: rgba(43, 78, 162, 0.16);

  --green: #1f7a4c;
  --green-soft: rgba(31, 122, 76, 0.1);
  --amber: #94620b;
  --amber-soft: rgba(176, 120, 18, 0.12);
  --red: #b0281f;
  --red-soft: rgba(176, 40, 31, 0.09);
  --apricot: #b9612a;
  --apricot-soft: rgba(185, 97, 42, 0.11);

  --scrim: rgba(28, 24, 16, 0.32);
  --tour-scrim: rgba(24, 20, 12, 0.46);
  --chrome: rgba(250, 249, 245, 0.78);
  --shadow-float: 0 18px 50px rgba(40, 30, 10, 0.16), 0 3px 10px rgba(40, 30, 10, 0.07);
  --shadow-lift: 0 1px 2px rgba(40, 30, 10, 0.06), 0 0 0 0.5px rgba(40, 30, 10, 0.06);
  --focus: 0 0 0 3px rgba(43, 78, 162, 0.32);

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, "Noto Sans Armenian", sans-serif;
  --font-display: ui-serif, "New York", "Iowan Old Style", "Charter", "Noto Serif Armenian", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 140ms;
  --medium: 240ms;

  --sidebar: 248px;
  --content: 1080px;
  --gutter: 16px;

  color-scheme: light;
}

/* Dark palette: warm near-black, never pure #000, with the accent lifted so
   it keeps contrast. Applied for the system setting unless the person chose
   Light, and always when they chose Dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141310;
    --bg-sunken: #0f0e0c;
    --surface: #1c1b18;
    --surface-raised: #24231f;
    --fill: rgba(255, 244, 222, 0.07);
    --fill-strong: rgba(255, 244, 222, 0.12);
    --separator: rgba(255, 244, 222, 0.1);
    --separator-strong: rgba(255, 244, 222, 0.18);
    --text: #f2efe8;
    --text-2: #aca79d;
    --text-3: #77736b;
    --accent: #93acf2;
    --accent-hover: #a9bef6;
    --accent-ink: #10131c;
    --accent-soft: rgba(147, 172, 242, 0.13);
    --accent-soft-strong: rgba(147, 172, 242, 0.22);
    --green: #6fcf97;
    --green-soft: rgba(111, 207, 151, 0.12);
    --amber: #e9b45a;
    --amber-soft: rgba(233, 180, 90, 0.13);
    --red: #ff8a7a;
    --red-soft: rgba(255, 138, 122, 0.12);
    --apricot: #f0a26a;
    --apricot-soft: rgba(240, 162, 106, 0.13);
    --scrim: rgba(0, 0, 0, 0.55);
    --tour-scrim: rgba(0, 0, 0, 0.62);
    --chrome: rgba(24, 23, 20, 0.78);
    --shadow-float: 0 22px 60px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 0 0 0.5px rgba(255, 244, 222, 0.08);
    --focus: 0 0 0 3px rgba(147, 172, 242, 0.38);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #141310;
  --bg-sunken: #0f0e0c;
  --surface: #1c1b18;
  --surface-raised: #24231f;
  --fill: rgba(255, 244, 222, 0.07);
  --fill-strong: rgba(255, 244, 222, 0.12);
  --separator: rgba(255, 244, 222, 0.1);
  --separator-strong: rgba(255, 244, 222, 0.18);
  --text: #f2efe8;
  --text-2: #aca79d;
  --text-3: #77736b;
  --accent: #93acf2;
  --accent-hover: #a9bef6;
  --accent-ink: #10131c;
  --accent-soft: rgba(147, 172, 242, 0.13);
  --accent-soft-strong: rgba(147, 172, 242, 0.22);
  --green: #6fcf97;
  --green-soft: rgba(111, 207, 151, 0.12);
  --amber: #e9b45a;
  --amber-soft: rgba(233, 180, 90, 0.13);
  --red: #ff8a7a;
  --red-soft: rgba(255, 138, 122, 0.12);
  --apricot: #f0a26a;
  --apricot-soft: rgba(240, 162, 106, 0.13);
  --scrim: rgba(0, 0, 0, 0.55);
  --tour-scrim: rgba(0, 0, 0, 0.62);
  --chrome: rgba(24, 23, 20, 0.78);
  --shadow-float: 0 22px 60px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 0 0 0.5px rgba(255, 244, 222, 0.08);
  --focus: 0 0 0 3px rgba(147, 172, 242, 0.38);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 0ms;
    --medium: 0ms;
  }
}