/* ================================================================
   Lognow websites — base tokens (layer 1, shared by every site)

   Source of truth: /shared/base-tokens.css
   Served as:       /assets/shared/base-tokens.css — a generated copy,
                    written by scripts/sync-shared.sh. Never edit the copy.

   Contains only what is not brand: spacing, radii, layout, and the names
   of the semantic colours. Every site loads this file first and then its
   own /assets/brand.css, which supplies hex values and fonts and maps them
   onto the names below.

   No hex values here — they belong in brand.css. The colour defaults are
   CSS system colours, so a page that forgets brand.css stays readable
   instead of turning transparent.
   ================================================================ */

/* ----------------------------------------------------------------
   Spacing scale (4px base) — same as CoreAI
   ---------------------------------------------------------------- */
:root {
  --space-1:  0.25rem;   /* 4px  — --s1 */
  --space-2:  0.5rem;    /* 8px  — --s2 */
  --space-3:  0.75rem;   /* 12px — --s3 */
  --space-4:  1rem;      /* 16px — --s4 */
  --space-5:  1.5rem;    /* 24px — --s5 */
  --space-6:  2rem;      /* 32px — --s6 */
  --space-7:  3rem;      /* 48px — --s7 */
  --space-8:  4rem;      /* 64px — --s8 */
  --space-9:  6rem;      /* 96px — --s9 */
  --space-10: 9rem;      /* 144px — --s10 */

  /* Short aliases */
  --s1: var(--space-1); --s2: var(--space-2); --s3: var(--space-3);
  --s4: var(--space-4); --s5: var(--space-5); --s6: var(--space-6);
  --s7: var(--space-7); --s8: var(--space-8); --s9: var(--space-9);
  --s10: var(--space-10);
}

/* ----------------------------------------------------------------
   Border radius
   ---------------------------------------------------------------- */
:root {
  --radius-sm:   4px;    /* --r1 */
  --radius-md:   8px;    /* --r2 */
  --radius-lg:   14px;   /* --r3 */
  --radius-xl:   22px;   /* --r4 */
  --radius-full: 999px;

  /* Short aliases */
  --r1: var(--radius-sm); --r2: var(--radius-md);
  --r3: var(--radius-lg); --r4: var(--radius-xl);
}

/* ----------------------------------------------------------------
   Layout
   ---------------------------------------------------------------- */
:root {
  --max-width: 1360px;
  --max: var(--max-width);   /* short alias */
}

/* ----------------------------------------------------------------
   Semantic colour names — every brand.css maps its palette onto these.
   A component that uses only these names can be copied between sites
   and takes on the other brand by itself.
   ---------------------------------------------------------------- */
:root {
  --bg:               Canvas;       /* page background */
  --surface:          Canvas;       /* raised surface: cards, boxes */
  --text:             CanvasText;   /* body text */
  --text-muted:       GrayText;     /* secondary text */
  --primary:          LinkText;     /* brand action colour: CTAs, links, highlights */
  --primary-contrast: Canvas;       /* text placed on --primary */
  --border:           GrayText;     /* hairlines and frames */
}