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

   Measured from taskip.net on 2026-08-15, read off its live computed styles rather
   than transcribed from a screenshot. The reference is a bright client-portal page
   whose whole argument is OPENNESS: a cool near-white field, generous radii, and one
   very large soft shadow spent on a single object per screen.

   The shadow is the pack. `--shadow-lift` is 90px of blur at a −30px spread, and it
   exists for ONE element per view — the object the page is about. A second use of it
   is the fastest way to stop this pack working, because what it buys is singularity
   rather than depth. */
:root {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel-2: #e8f0fc;
  --ink: #151a23;
  --muted: #4b5565;
  --border: #d5dbe4;
  --border-strong: #bec8d6;
  /* The control edge is split from the seam: WCAG 1.4.11 wants 3:1 for the visual
     boundary of a control, and a seam quiet enough to draw a page's structure is
     nowhere near it. */
  --edge: #7f8997;

  --accent: #1f5fb0;
  --accent-weak: #eef3f9;
  --accent-ink: #ffffff;

  --ok: #1c6b45;
  --ok-weak: #edf3f0;
  --warn: #8a5200;
  --warn-weak: #f6f2eb;
  /* DERIVED, not measured. The reference is a marketing site and paints no error
     state, so this is authored to clear AA on the field, the panel and its own tint
     (6.09 / 6.54 / 5.75) rather than sampled. Read it as a pack decision. */
  --danger: #b3261e;
  --danger-weak: #f9eeed;
  /* `--info` IS the accent: this pack's signal for "running" is the product's own
     colour, not a new hue. A second blue would separate from --ok by less than the
     palette gate's hard floor. */
  --info: #1f5fb0;
  --info-weak: #eef3f9;

  /* The tile ramp — four steps of the same cool blue, for stacked bands and the
     stepped panels the reference builds its feature grid from. */
  --tile-1: #e3ecfb;
  --tile-2: #dbe7fa;
  --tile-3: #d2e1f8;
  --tile-4: #c8daf6;

  --r-control: 10px;
  --r-card: 16px;
  --r-pill: 999px;

  --shadow-1: 0 2px 8px rgba(21, 26, 35, 0.06);
  /* The signature, and it is spent on ONE object per view. */
  --shadow-lift: 0 40px 90px -30px rgba(52, 64, 84, 0.28), 0 8px 24px rgba(52, 64, 84, 0.06);

  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-state: 0.18s;
  --dur-hover: 0.12s;

  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-ui: "Manrope", system-ui, sans-serif;
  --font-data: ui-monospace, "SF Mono", Menlo, monospace;

  --t-meta: 12px;
  --t-body: 16px;
  --t-card: 22px;
  --t-title: 28px;
  --t-section: 36px;
  --t-page: 44px;
  --t-hero: 72px;

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

  --track-tight: -0.019em;
  --track-wide: 0.04em;

  --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;
  --bg: #0b0f14;
  --panel: #161b23;
  --panel-2: #1b2430;
  --ink: #eef2f7;
  --muted: #a3adbb;
  --border: #1c2531;
  --border-strong: #293443;
  --edge: #5b6675;

  --accent: #3392ff;
  --accent-weak: #182434;
  --accent-ink: #0e1218;

  --ok: #46d39a;
  --ok-weak: #1a292c;
  --warn: #e0a030;
  --warn-weak: #262524;
  --danger: #ff7b72; /* derived, as above — 7.62 field / 6.85 panel / 6.16 own tint */
  --danger-weak: #282229;
  --info: #3392ff;
  --info-weak: #182434;

  --tile-1: #1e2733;
  --tile-2: #222c3a;
  --tile-3: #263141;
  --tile-4: #2a3648;

  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* 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. */

.dy-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);
}

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

.dy-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. */
.dy-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

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

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

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

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

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

.dy-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. */
.dy-btn:focus-visible,
.dy-chip:focus-visible,
.dy-status:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-weak);
  border-color: var(--accent);
}

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

.dy-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);
}

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

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

.dy-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) {
  .dy-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

.dy-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;
}

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

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

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

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

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

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

.dy-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);
}

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

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

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

.dy-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. */
.dy-heading--3 {
  font-size: var(--t-card);
  font-weight: var(--w-semi);
  line-height: 1.35;
}

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

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

.dy-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;
}

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

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

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

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

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

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

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

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

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

.dy-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) {
  .dy-btn {
    transition: none;
  }
}

.dy-lift {
  background: var(--panel);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  padding: var(--space-6);
}