/*
  NicheSite — design tokens
  Concept: "the blueprint" — templates are build-plans for a community's site,
  so the system borrows the vocabulary of technical drawing: hairline rules,
  measured spacing, a single cyanotype-blue accent, flat surfaces with no
  shadow language. Brand name is the single token --brand-name-swap below;
  update it (and <title>/copy) globally when the real name is chosen.
*/

:root {
  /* ---- color: dark (default) ---- */
  --ink:            #15181D;   /* page background */
  --ink-raised:     #1B1F26;   /* card / panel background */
  --ink-line:       #2C323B;   /* hairline borders */
  --ink-line-strong: #3E4650;  /* emphasis borders */
  --paper:          #F5F4EF;   /* primary text on dark */
  --paper-dim:      #A8AEB8;   /* secondary text on dark */
  --paper-faint:    #6E7580;   /* tertiary / meta text on dark */

  /* ---- color: light (opt-in via [data-theme="light"]) ---- */
  --light-paper:      #FAF9F6;
  --light-panel:      #FFFFFF;
  --light-line:       #DEDBD2;
  --light-line-strong:#C6C2B6;
  --light-ink:        #181A1E;
  --light-ink-dim:    #52565E;
  --light-ink-faint:  #7A7E85;

  /* ---- accent: one signal color only, used sparingly ---- */
  --accent:         #3E6FA8;   /* cyanotype blue */
  --accent-strong:  #5586C2;
  --accent-ink:     #0E1B27;   /* text on accent-filled surfaces */

  /* ---- type ---- */
  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.75rem + 1.6vw, 3rem);
  --step-4:  clamp(2.75rem, 2.1rem + 2.9vw, 4.25rem);

  /* ---- spacing scale (8px base) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 7rem;

  /* ---- layout ---- */
  --content-max: 78rem;
  --measure: 62ch;
  --radius: 3px;
  --radius-sm: 2px;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

[data-theme="light"] {
  --ink: var(--light-paper);
  --ink-raised: var(--light-panel);
  --ink-line: var(--light-line);
  --ink-line-strong: var(--light-line-strong);
  --paper: var(--light-ink);
  --paper-dim: var(--light-ink-dim);
  --paper-faint: var(--light-ink-faint);
  --accent-ink: #FFFFFF;
}

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