/* Christian Systems design tokens. One file for the site, the apps and the social network.
   Light and dark follow the system unless a page sets data-theme="light" or "dark" on <html>. */
@font-face { font-family: "Chancel"; src: url("font/Chancel-Regular.woff") format("woff"), url("font/Chancel-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  /* the palette */
  --cs-red: #e3261c;      --cs-red-bright: #f2492f; --cs-red-deep: #a8151b; --cs-wine: #4a0a0f;
  --cs-gold: #f2b33d;     --cs-gold-light: #ffd36b; --cs-gold-deep: #b87a14;
  --cs-ink: #140708;      --cs-night: #1f0b0d;      --cs-coal: #2a1416;
  --cs-cream: #f6ebdd;    --cs-paper: #e8d8c3;      --cs-stone: #faf6f0;

  /* type: Chancel for display, the system for reading and for interfaces */
  --cs-display: "Chancel", ui-monospace, monospace;
  --cs-text: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --cs-step--1: clamp(.83rem, .8rem + .15vw, .9rem);
  --cs-step-0: clamp(1rem, .96rem + .2vw, 1.1rem);
  --cs-step-1: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --cs-step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
  --cs-step-3: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --cs-step-4: clamp(3rem, 1.8rem + 6vw, 7rem);

  /* space, radius, motion */
  --cs-space: clamp(16px, 2.4vw, 28px);
  --cs-radius-s: 8px; --cs-radius: 14px; --cs-radius-l: 22px;
  --cs-ease: cubic-bezier(.32, .08, .24, 1);      /* settle */
  --cs-ease-out: cubic-bezier(.16, 1, .3, 1);     /* arrive */
  --cs-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --cs-fast: .18s; --cs-med: .32s; --cs-slow: .7s;

  /* the light appearance */
  color-scheme: light dark;
  --cs-bg: var(--cs-stone);
  --cs-surface: #ffffff;
  --cs-surface-2: #f3ece2;
  --cs-glass: rgb(255 255 255 / .72);
  --cs-line: rgb(20 7 8 / .12);
  --cs-fg: var(--cs-ink);
  --cs-fg-2: #5b4a46;
  --cs-accent: var(--cs-red-deep);
  --cs-accent-fg: #ffffff;
  --cs-highlight: var(--cs-gold-deep);
  --cs-focus: var(--cs-gold);
  --cs-shadow: 0 1px 2px rgb(20 7 8 / .06), 0 8px 24px rgb(20 7 8 / .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cs-bg: var(--cs-ink); --cs-surface: var(--cs-night); --cs-surface-2: var(--cs-coal);
    --cs-glass: rgb(31 11 13 / .7); --cs-line: rgb(246 235 221 / .12);
    --cs-fg: var(--cs-cream); --cs-fg-2: #cbb8a6; --cs-accent: var(--cs-red); --cs-highlight: var(--cs-gold);
    --cs-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .45);
  }
}
:root[data-theme="dark"] {
  --cs-bg: var(--cs-ink); --cs-surface: var(--cs-night); --cs-surface-2: var(--cs-coal);
  --cs-glass: rgb(31 11 13 / .7); --cs-line: rgb(246 235 221 / .12);
  --cs-fg: var(--cs-cream); --cs-fg-2: #cbb8a6; --cs-accent: var(--cs-red); --cs-highlight: var(--cs-gold);
  --cs-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .45);
}
@media (prefers-reduced-motion: reduce) { :root { --cs-fast: .01ms; --cs-med: .01ms; --cs-slow: .01ms; } }