/* Clivi web kit: brand tokens and base components. */

/* ===== tokens ===== */
:root{
  --primary:#1E3FD0;   /* cobalt, the one accent */
  --dark:#111412;      /* night */
  --dark-2:#1B1F1C;    /* night-2 */
  --light:#E6E5EA;     /* tile */
  --ink:#111412;
  --ink-2:#3A403C;
  --muted:#5A615C;
  --hair:#E2E3DF;      /* line */
  --line-strong:#C9CBC6;
  --ground:#FBFBFA;
  --panel:#FFFFFF;     /* surface */
  --night-ink:#F3F4F1;
  --night-muted:#A9AFAA;
  --font-display:"Schibsted Grotesk",system-ui,sans-serif;
  --font-body:"Schibsted Grotesk",system-ui,sans-serif;
  --radius:10px;
  --radius-button:9px;
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}

/* ===== the Clivi wordmark and eyes  ===== */
  .wm{display:inline-flex;align-items:flex-end;gap:.03em;font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;line-height:.8;color:var(--wm-ink,var(--ink))}
  .wm .i{margin-left:.04em;display:inline-flex;flex-direction:column;align-items:center;gap:.075em}
  .eye{display:block;width:.31em;height:.31em;flex:none;overflow:visible}
  .eye .r{fill:none;stroke:var(--wm-ink,var(--ink));stroke-width:16}
  .eye .p{fill:var(--pupil,var(--primary))}
  .wm .stem{display:block;width:.17em;height:.523em;margin-bottom:.043em;background:var(--wm-ink,var(--ink))}
  .mk{display:inline-flex;gap:.12em;font-size:inherit}
  .mk .eye{width:1em;height:1em}
  .wm .c{margin-right:.02em}

/* ===== ground variants (the kit's on-p / on-d / on-dc rule is EXACT, line 45) ===== */
  .on-p,.on-d,.on-dc{--wm-ink:#FFFFFF;--pupil:#FFFFFF}
/* Whole-surface grounds: set the background, the ink, the ring colour and the pupil colour together.
   Light: night ring and letters, cobalt pupil. Cobalt and night: white ring, letters and pupil. */
.g-light{background:var(--ground);color:var(--ink);--wm-ink:var(--ink);--pupil:var(--primary)}
.g-tile{background:var(--light);color:var(--ink);--wm-ink:var(--ink);--pupil:var(--primary)}
.g-cobalt{background:var(--primary);color:#FFFFFF;--wm-ink:#FFFFFF;--pupil:#FFFFFF}
.g-night{background:var(--dark);color:var(--night-ink);--wm-ink:#FFFFFF;--pupil:#FFFFFF}

/* ===== small-size eyes (EXACT declarations from lines 40-41, the kit's heavier ring and pupil for 12-40px marks).
   The kit scopes these to its header, avatar, post and card contexts; on the web use .sm on .wm or .mk
   (nav, footer, avatar, favicon-size use). ===== */
  .sm .eye .r,.post .who .eye .r,.post .art .wm .eye .r,.card.back .wm .eye .r,.letter .wm .eye .r{stroke-width:22}
  .sm .eye .p,.post .who .eye .p,.post .art .wm .eye .p,.card.back .wm .eye .p,.letter .wm .eye .p{r:18px;cx:63px;cy:63px}

/* ===== eye field (EXACT, lines 99-101). Fades from the top left; every pupil looks the same way.
   Use at most once per surface, behind empty space, never behind type. ===== */
  .eyefield{width:100%;height:100%;display:grid;grid-template-columns:repeat(14,1fr);align-content:center;justify-items:center;row-gap:34px;padding:0 40px;-webkit-mask-image:linear-gradient(135deg,#000 0%,rgba(0,0,0,.7) 50%,rgba(0,0,0,.45) 100%);mask-image:linear-gradient(135deg,#000 0%,rgba(0,0,0,.7) 50%,rgba(0,0,0,.45) 100%)}
  .eyefield .eye{font-size:52px;width:1em;height:1em;border-width:.12em;padding:.1em}
  .eyefield .eye b{width:.3em;height:.3em}

/* Helper: the field as a positioned background layer. Put .eyefield inside it. */
.eyefield-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}