/* fine synthesis — design tokens (refresh of finesynthesis.lt)
   One source of truth for colour, type, spacing, radii, shadows.
   Colours come from the current site (charcoal bars, light-grey page, purple accent)
   and from the logo itself (cyan + lavender hexagons). */

:root {
  /* ---- colour roles ---- */
  --ink: #1e1e1e;            /* header bar — same as the current nav */
  --ink-2: #282828;          /* footer — same as current footer */
  --ink-3: #333336;          /* raised surfaces on dark (menus, table heads) */
  --paper: #eeeeef;          /* page background — current #eee, a touch cooler */
  --surface: #ffffff;        /* cards, rows, structure plates */
  --surface-2: #f7f7f8;      /* quiet fills inside cards */
  --line: #d9d9de;           /* hairlines on light */
  --line-dark: #3a3a3e;      /* hairlines on dark */

  --text: #1e1e1e;           /* body text on light (15.9:1 on white) */
  --muted: #595962;          /* secondary text (6.0:1 on paper, 6.9:1 on white) */
  --on-dark: #eeeeee;        /* text on charcoal (14.4:1) */
  --on-dark-muted: #b9b9c0;  /* secondary text on charcoal (8.5:1) */

  --violet: #634a9e;         /* primary accent: the current purple, tuned to the logo lavender (7.0:1 on white) */
  --violet-deep: #4f3b80;    /* hover / pressed */
  --violet-tint: #eeeaf6;    /* selected row / chip background */
  --cyan: #9edbec;           /* logo cyan — accents on dark only (10.9:1 on ink) */
  --lavender: #a69ecd;       /* logo lavender — accents on dark only (6.7:1 on ink) */
  --overlap: #7c92ca;        /* where the two logo hexagons overlap */
  --amber-on-dark: #ffc58f;  /* warning text on dark (CAS check-digit mismatch) */

  /* ---- type ---- */
  --font-display: "Red Hat Display", "Segoe UI", sans-serif;
  --font-body: "Red Hat Text", "Segoe UI", sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, monospace;

  --step--1: 0.875rem;   /* 14 — captions, meta */
  --step-0: 1rem;        /* 16 — body */
  --step-1: 1.125rem;    /* 18 — lede, nav */
  --step-2: 1.375rem;    /* 22 — card titles */
  --step-3: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);  /* 26→34 — section heads */
  --step-4: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);      /* 34→56 — hero */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  /* ---- spacing (4px base) ---- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-24: 6rem;    /* 96 */

  --container: 76rem;  /* 1216 */

  /* ---- shape ---- */
  --radius-sm: 4px;    /* inputs, buttons — the current site is square; this is the softest step */
  --radius-md: 8px;    /* cards, plates */

  --shadow-card: 0 1px 2px rgba(30, 30, 30, 0.06), 0 4px 16px rgba(30, 30, 30, 0.05);
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.35);

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

/* ---- base layer (shared by every page) ---- */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
  text-wrap: balance;
  hyphens: manual;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* visible focus everywhere; dark regions swap the ring to logo cyan */
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--cyan); }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }

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