/* The display kit in AYNIC's colours and type. The kit in this folder (synth.js, synth-elements.css, synth-look.css: the Display Builder's
   elements, a build of INKLINE's library, synced by scripts/sync-synth.mjs) names its own variables (--ik-*, --sx-*) and reads them from the
   page, through the shadow roots its elements live in (web/src/components/display). synth-look.css gives them the kit's own values; this
   file, loaded after it by web/index.html, answers the ones that are a colour, a typeface or a corner from AYNIC's tokens (--ay-*), so a
   display wears the app's look in light and dark and follows the design library when it changes. Nothing else of the app reads these
   names (server/test/design-inkline.test.ts holds web/src at none). It is AYNIC's file, not part of the sync. */
:root[data-palette="aynic"] {
  --ik-ink: var(--ay-dark-canvas); --ik-paper: var(--ay-light-canvas);
  --ik-ink-1: var(--ay-dark-sheet); --ik-ink-2: var(--ay-dark-raised); --ik-ink-rule: var(--ay-dark-line);
  --ik-paper-1: var(--ay-light-sheet); --ik-paper-2: var(--ay-light-sunken); --ik-paper-rule: var(--ay-light-line);
  --ik-dim: var(--ay-dark-text-2); --ik-faint: #71716F;
  --ik-text-2-ink: var(--ay-dark-text-2); --ik-text-3-ink: #71716F; --ik-text-2-paper: var(--ay-light-text-2); --ik-text-3-paper: #8A8A88;
  --ik-marker: var(--ay-accent); --ik-marker-deep: var(--ay-accent-hover); --ik-marker-text: var(--ay-accent-text);
  --ik-font-display: var(--ay-font-ui); --ik-font-body: var(--ay-font-ui);
  --ik-track-display: -0.026em; --ik-track-heading: -0.016em; --ik-track-label: 0.04em; --ik-track-label-tight: 0.02em;
  --ik-r-xs: 4px; --ik-r-sm: 6px; --ik-r-btn: 6px; --ik-r-md: 8px; --ik-r-lg: 12px; --ik-r-xl: 16px;
  --ik-quick: var(--ay-dur-fast) var(--ay-ease);
  --ik-bg: var(--ay-canvas); --ik-surface: var(--ay-sheet); --ik-surface-2: var(--ay-raised);
  --ik-text: var(--ay-text); --ik-text-2: var(--ay-text-2); --ik-text-3: var(--ay-text-3);
  --ik-rule: var(--ay-line); --ik-line: var(--ay-line-strong); --ik-outline: var(--ay-line-strong);
  --ik-solid: var(--ay-text); --ik-on-solid: var(--ay-sheet);
  --ik-accent-text: var(--ay-accent-text); --ik-on-accent: var(--ay-on-accent);
  --ik-pressed-edge: transparent;
  --ik-fill: var(--ay-hover); --ik-fill-2: color-mix(in srgb, var(--ay-text) 10%, transparent);
  --ik-scrim: var(--ay-scrim);
  --ik-focus-w: var(--ay-focus-w);
  --ik-sage: var(--ay-green);
  --ik-ochre: var(--ay-amber);
  --ik-slate: var(--ay-teal);
}
/* the light theme: what differs */
:root[data-palette="aynic"][data-theme="paper"] {
  --ik-bg: var(--ay-canvas); --ik-surface: var(--ay-sheet); --ik-surface-2: var(--ay-sunken);
  --ik-text: var(--ay-text); --ik-text-2: var(--ay-text-2); --ik-text-3: var(--ay-text-3);
  --ik-rule: var(--ay-line); --ik-line: var(--ay-line-strong); --ik-outline: var(--ay-line-strong);
  --ik-solid: var(--ay-text); --ik-on-solid: var(--ay-sheet);
  --ik-accent-text: var(--ay-accent-text); --ik-on-accent: var(--ay-on-accent);
  --ik-fill: var(--ay-hover); --ik-fill-2: color-mix(in srgb, var(--ay-text) 9%, transparent);
  --ik-scrim: var(--ay-scrim);
}