/* SHELEG Design — Almanac token layer (light default + dark twin).
   Copy verbatim; consume only var(--…) in components.
   Theme switch: set data-theme="dark" on :root.

   Measured from auxia.io on 2026-08-16 — the cleanest extraction in this library,
   because the reference publishes its own token layer: `auxia.shared` declares 30
   `--base-color-*` properties, so the palette below is read from the stylesheet the
   reference serves rather than sampled off rendered pixels.

   The field is OATMEAL and not white — `#f0efe3` is the reference's own
   `neutral--white`, and it is the whole first impression of the page. Seams are 2px
   and 4px; there is no 1px anywhere in the reference. Display runs to 104px at weight
   500 with a line-height BELOW ONE, which locks the lines together into a block.

   The pack holds ONE dark and ONE light and uses them in both orders: the inverted
   band on the light register is the ground on the dark one. */
:root {
  --bg: #f0efe3;
  --panel: #f7f7f0;
  --panel-2: #e2e1d3;
  --ink: #232323;
  --muted: #5c5b52;
  /* At 2px these are read by mass rather than by contrast, which is why they sit far
     under a hairline pack's values and are not a defect. */
  --border: #bebdad;
  --border-strong: #a7a592;
  --edge: #858370;

  /* NOT the reference's `#0b4fff`: that measures 4.46 on the reference's own deeper
     oatmeal, under AA on a ground it lands on. This is a shift inside one hue rather
     than a change of hue — the first ported reference that was already blue. */
  --accent: #1f5fb0;
  --accent-weak: #e6ebeb;
  --accent-ink: #ffffff;

  --ok: #17603d;
  --ok-weak: #e6ebe2;
  /* The reference's orange `#fa6838` is 2.32 on the oatmeal and cannot carry a word
     there, so on this register it is darkened until it clears. The bright value has
     exactly one home and the dark register is it. */
  --warn: #993f0e;
  --warn-weak: #f0e9de;
  /* DERIVED — the reference paints no error state, so this is a pack decision and
     says so here. It is a CRIMSON rather than the red the other packs derive: this
     pack's `--warn` is a burnt orange, and an orange-red danger beside it measured
     6.4 apart at full colour against the palette gate's hard floor of 10.0 — two
     semantic states in one colour, which no secondary encoding excuses. Moved along
     the hue until it separates. 6.76 field / 7.27 panel / 6.34 own tint. */
  --danger: #a01050;
  --danger-weak: #f0e5e4;
  --info: #1f5fb0;
  --info-weak: #e6ebeb;

  --r-control: 8px;
  --r-card: 16px;
  --r-pill: 100vw;
  --r-lg: 24px;
  /* There is no 1px anywhere in the reference. */
  --border-width: 2px;

  /* One object floats per page, and the shadow is layered rather than single — the
     reference stacks four stops and the deepest is 162px of blur. */
  --shadow-1: 0 120px 60px rgba(35, 35, 35, 0.02), 0 60px 40px rgba(35, 35, 35, 0.05),
    0 16px 32px rgba(35, 35, 35, 0.06), 0 4px 12px rgba(35, 35, 35, 0.05);

  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-state: 0.16s;
  --dur-hover: 0.12s;

  --font-ui: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-meta: 12px;
  --t-body: 16px;
  --t-card: 24px;
  --t-title: 32px;
  --t-section: 48px;
  --t-page: 64px;
  --t-hero: 104px;

  --w-body: 400;
  --w-med: 500;
  --w-semi: 500;
  --w-bold: 500;

  --track-tight: -0.03em;
  --track-wide: 0.06em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  background-color: var(--bg);
  color: var(--ink);
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* The reference has no dark register and the first cut of this one borrowed its
     navy `#080331`. Overruled: a dark theme is dark, and that one was blue. What
     replaces it is the oatmeal's own opposite — a warm near-black — so the paper
     identity survives the inversion instead of becoming another company's page. */
  --bg: #15140f;
  --panel: #1e1c15;
  --panel-2: #26241b;
  --ink: #f0efe3;
  --muted: #b3b0a2;
  --border: #3c3a31;
  --border-strong: #504e45;
  --edge: #6f6d64;

  --accent: #3392ff;
  --accent-weak: #202527;
  --accent-ink: #15140f;

  --ok: #46d39a;
  --ok-weak: #212a1f;
  /* The reference's orange, in its one readable home. */
  --warn: #fa6838;
  --warn-weak: #2f2218;
  /* Derived, and crimson for the same reason: the dark register's warn is the
     reference's own bright orange. 7.02 field / 6.49 panel / 5.82 own tint. */
  --danger: #ff6f9a;
  --danger-weak: #2e2225;
  --info: #3392ff;
  --info-weak: #202527;

  --shadow-1: 0 120px 60px rgba(0, 0, 0, 0.3), 0 60px 40px rgba(0, 0, 0, 0.4),
    0 16px 32px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Light is the default register. To follow the OS instead, have the app set
   data-theme="dark" from a prefers-color-scheme listener — keep one switch,
   never two sources of truth for the theme. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-state: 0s;
    --dur-hover: 0s;
  }
}
/* ── components ── */

/* Every value below is a token. The pack's whole elevation model is the seam, so
   there is no shadow in this file outside the one --shadow-1 the token layer owns,
   and no colour literal at all — the gate reads this section for both. */

.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: var(--w-med);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--dur-hover) var(--motion-ease),
    border-color var(--dur-hover) var(--motion-ease),
    color var(--dur-hover) var(--motion-ease);
}

.al-btn--sm {
  min-height: 28px;
  padding-inline: var(--space-3);
}

.al-btn--lg {
  min-height: 44px;
  padding-inline: var(--space-5);
}

/* The label colour is stated here rather than inherited: an anchor reset that says
   `color: inherit` outranks a bare utility and paints ink on the accent. */
.al-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.al-btn--primary:hover:not(:disabled) {
  background: var(--info);
  border-color: var(--info);
}

.al-btn--secondary {
  background: var(--panel);
  border-color: var(--edge);
  color: var(--ink);
}

.al-btn--secondary:hover:not(:disabled) {
  border-color: var(--muted);
}

.al-btn--ghost {
  background: transparent;
  color: var(--muted);
}

.al-btn--ghost:hover:not(:disabled) {
  color: var(--ink);
}

.al-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* One focus idiom on every control — a button, an input and a link get the same
   ring, because three focus treatments is three things to learn. */
.al-btn:focus-visible,
.al-chip:focus-visible,
.al-status:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-weak);
  border-color: var(--accent);
}

.al-card {
  container-type: inline-size;
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.al-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--border);
}

.al-card__title {
  margin: 0;
  font-size: var(--t-card);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.al-card__meta {
  font-family: var(--font-data);
  font-size: var(--t-meta);
  letter-spacing: var(--track-wide);
  color: var(--muted);
}

.al-card__body {
  padding: var(--space-5);
}

/* CONTAINER, not PAGE: the head stacks against the card's own width, so a card in a
   narrow column behaves the same wherever the column happens to be. */
@container (max-width: 30rem) {
  .al-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

.al-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  padding-inline: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: var(--w-med);
  white-space: nowrap;
}

.al-chip--neutral {
  background: var(--panel-2);
  color: var(--muted);
}

.al-chip--accent {
  background: var(--accent-weak);
  color: var(--accent);
}

/* The rail — the one place the accent is a shape rather than a word. */
.al-chip--selected {
  position: relative;
  padding-left: var(--space-4);
  color: var(--ink);
}

.al-chip--selected::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: 25%;
  bottom: 25%;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.al-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.al-stat__label {
  font-size: var(--t-body);
  color: var(--muted);
}

.al-stat__value {
  font-size: var(--t-section);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.al-stat__source {
  font-family: var(--font-data);
  font-size: var(--t-meta);
  letter-spacing: var(--track-wide);
  color: var(--muted);
}

.al-heading {
  margin: 0;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.al-heading--1 {
  font-size: var(--t-page);
  font-weight: var(--w-bold);
  line-height: 1.2;
}

.al-heading--2 {
  font-size: var(--t-section);
  font-weight: var(--w-bold);
  line-height: 1.2;
}

/* Level 3 is body size and separates by weight alone, which is what stops a dense
   screen from becoming a ladder of sizes. */
.al-heading--3 {
  font-size: var(--t-card);
  font-weight: var(--w-semi);
  line-height: 1.35;
}

.al-rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--border);
}

.al-rule--strong {
  background: var(--border-strong);
}

.al-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  padding-inline: var(--space-3);
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: var(--w-med);
  white-space: nowrap;
}

.al-status__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  flex: none;
  background: currentColor;
}

.al-status--ok {
  background: var(--ok-weak);
  color: var(--ok);
}

.al-status--ok .al-status__dot {
  background: var(--ok);
}

.al-status--warn {
  background: var(--warn-weak);
  color: var(--warn);
}

.al-status--warn .al-status__dot {
  background: var(--warn);
}

.al-status--danger {
  background: var(--danger-weak);
  color: var(--danger);
}

.al-status--danger .al-status__dot {
  background: var(--danger);
}

.al-status--neutral {
  background: var(--panel-2);
  color: var(--muted);
}

.al-status--neutral .al-status__dot {
  background: var(--muted);
}

.al-skeleton {
  display: block;
  border-radius: var(--r-control);
  background: var(--panel-2);
}

/* Static by decision. The reference's skeletons do not animate, and a shimmer is
   motion spent telling the reader something they already know. */
@media (prefers-reduced-motion: reduce) {
  .al-btn {
    transition: none;
  }
}

.al-tagged {
  position: relative;
  border: var(--border-width) solid var(--border);
  border-radius: var(--r-card);
  background: var(--panel);
  padding: var(--space-6) var(--space-5) var(--space-5);
}

.al-tagged__tag {
  position: absolute;
  top: 0;
  left: var(--space-4);
  transform: translateY(-50%);
  background: var(--panel);
  padding-inline: var(--space-2);
  font-family: var(--font-data);
  font-size: var(--t-meta);
  font-weight: var(--w-med);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
}