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

   Origin: basedash.com, read from its computed styles and its two shipped
   stylesheets (_astro/index.*.css, _astro/Section.*.css) on 2026-08-15. Every
   colour, radius, duration and curve below is that measurement unless the
   declaration says otherwise; four declarations say otherwise and each carries
   its reason inline.

   The neutral ramp is alpha over the ink, exactly as the reference builds it —
   so one ramp works on the field, on a card and on a table row. Each step ships
   the literal first and the relative-colour derivation second: a browser without
   Baseline-2024 relative colour drops the second declaration and keeps a correct
   literal, a newer one tracks --ink when a theme moves it. */

:root {
  /* ── field and surfaces ──────────────────────────────────────────────── */
  --bg: #fcf9f5;      /* the page; reference --color-background-1 (light) */
  --panel: #fffdfa;   /* the raised card; reference --color-background-2 */
  --panel-2: #ffffff; /* the data plane — tables, menus, popovers */

  --ink: #14100c;     /* reference --color-neutral-1 (light) */

  /* @role non-text: --inset — a fill, never a text colour: 1.03:1 on --bg by
     construction (5% ink over the field). It is the segmented track and the
     quiet tile, and anything written on it is --ink or --muted. */
  --inset: rgba(20, 16, 12, 0.05); /* = --on-ink at 5% */

  --ink-2: rgba(20, 16, 12, 0.72); /* = --on-ink at 72% —  --color-neutral-2 — secondary prose; composites to 7.47:1 */
  /* --muted composites to 4.13:1 on the field and 4.18:1 on --panel-2 — under
     AA by 0.37. It carries column heads, axis ticks and row numbers, where the
     word is repeated by position; a label a decision rests on takes --ink-2. */
  --muted: rgba(20, 16, 12, 0.55); /* = --on-ink at 55% —  --color-neutral-3 */
  --faint: rgba(20, 16, 12, 0.22); /* = --on-ink at 22% —  --color-neutral-4 — disabled, hairline ticks */
  --border: rgba(20, 16, 12, 0.12); /* = --on-ink at 12% —  --color-neutral-5 — THE elevation device */
  --border-strong: rgba(20, 16, 12, 0.22); /* = --on-ink at 22% —  --color-neutral-4 — the hover edge */

  --row-hover: #f7f7f7; /* reference --hero-table-row-hover (light) */

  /* ── the one accent ──────────────────────────────────────────────────── */
  /* It marks and it labels; it never fills a control. The control is --ink.
     --accent is the reference's --color-theme-1-text, which is the value the
     site actually paints text in; --accent-mark is --color-theme-1 itself, the
     fill used for chart ink and the icon tile. */
  --accent: #c2410c;      /* 4.93:1 on --bg — text-safe */
  --accent-mark: #e8792f; /* @role non-text: --accent-mark — 2.78:1 on --bg, a fill and a stroke */
  --accent-line: rgba(194, 65, 12, 0.30); /* --color-theme-1-line (light) */
  --accent-weak: rgba(232, 121, 47, 0.06); /* = --accent-mark at 6% —  --color-theme-1-wash (light) */

  --on-ink: #fcf9f5; /* text ON --ink — 18.04:1; the primary button's own colour */

  /* ── status ──────────────────────────────────────────────────────────── */
  /* @role non-text: --ok, --danger, --info, --warn — measured on the reference at
     2.89 / 3.34 / 3.51 / 2.06 against --bg, all below the 4.5 text floor and two of
     them below 3. They are dots, fills, bars and chart ink here; the word beside
     them is --ink. Status is never by colour alone in this pack, which is the rule
     that carries the meaning where the ratio cannot. */
  --ok: #2fa86b;      /* the site's positive delta and chart member 7 */
  --ok-weak: rgba(47, 168, 107, 0.10); /* = --chart-3 at 10% */
  --danger: #f84747;  /* the site's negative delta */
  --danger-weak: rgba(248, 71, 71, 0.10); /* = --danger at 10% */
  --info: #0891b2;    /* --color-theme-2 (light) — the "Verified" seal */
  --info-weak: rgba(8, 145, 178, 0.10);
  /* --warn is DERIVED, not measured in use: the reference declares amber-500 in
     its own theme layer and never paints a warning anywhere on the page. The step
     is this pack's choice, taken because it is the one amber that clears the hard
     separation floor against a terracotta accent in both themes (23.8 light,
     16.2 dark at full colour). */
  --warn: oklch(76.9% 0.188 70.08);
  --warn-weak: rgba(240, 160, 32, 0.12);

  /* ── chart ramp ──────────────────────────────────────────────────────── */
  /* Measured off the reference's own dashboard mock, in its stacking order.
     Names match shadcn/ui's chart contract so a Recharts series can read them
     directly. Two of the five are one hue apart under protanopia — see the
     pack's Bans: a series is labelled at its own mark, never by legend alone. */
  --chart-1: #ea863f; /* --color-chart-member-3 */
  --chart-2: #4679f2;
  --chart-3: #2fa86b; /* --color-chart-member-7 */
  --chart-4: #f47bd0;
  --chart-5: #4ebcfc; /* --color-chart-member-6 */

  /* ── radii ───────────────────────────────────────────────────────────── */
  /* The reference overrides the whole Tailwind ramp by ×1.25: 2.5 / 5 / 7.5 /
     10 / 15 / 20 / 30. Nesting is concentric — inner = outer − the padding
     between them, which is why a 15px track with 4px of padding holds a 10px
     thumb rather than a second 15. */
  --r-inset: 7.5px;  /* --radius / --radius-md */
  --r-control: 10px; /* --radius-lg — buttons, chips, the segmented thumb */
  --r-card: 15px;    /* --radius-xl — every card and every track */
  --r-panel: 20px;   /* --radius-2xl — dialogs and the outermost frame */
  --r-pill: 999px;

  /* ── elevation ───────────────────────────────────────────────────────── */
  /* One shadow, for true overlays only. Cards are drawn with --border. */
  --shadow-1: 0 1px 2px #11111108, 0 8px 24px #1111110a; /* --hero-demo-shadow (light) */

  /* ── type ────────────────────────────────────────────────────────────── */
  /* The display face is licensed and the reference self-hosts it. A project
     without that licence sets --font-display to --font-ui and loses nothing
     structural: the display face appears on one line per page. */
  --font-display: "Alpha Lyrae", var(--font-ui);
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --font-data: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --t-display: 48px; /* the one display line; line-height 1.1 */
  --t-title: 34px;   /* page and section titles; --track-title */
  --t-card: 18px;    /* card titles, weight 500 */
  --t-prose: 15px;   /* running text, in --ink-2 or --muted */
  --t-body: 14px;    /* dense UI and table cells */
  --t-meta: 12px;    /* labels, column heads, row numbers */
  --t-kicker: 10px;  /* the mono kicker; uppercase, --track-kicker, --accent */

  --track-title: -0.03em; /* −1.02px at 34px, as measured */
  --track-kicker: 0.1em;  /* +1px at 10px, as measured */

  --w-normal: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* ── grid ────────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --h-row: 32px;     /* data row, measured */
  --h-control: 30px; /* segmented thumb, measured */
  --h-field: 38px;   /* segmented track and input, measured */

  /* ── motion ──────────────────────────────────────────────────────────── */
  /* One curve does the work: --ease is the reference's own default timing
     function. --ease-out and --ease-in-out are its other two, kept for enters
     and for on-screen movement. Its --ease-in is deliberately NOT carried over:
     MOTION_DOCTRINE bans ease-in in UI and this pack has no exception to it. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.17, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1);

  --dur-xs: 75ms;
  --dur-sm: 0.1s;
  --dur: 0.15s; /* the reference's default transition duration */
  --dur-lg: 0.2s;
  --dur-xl: 0.3s;

  --press-scale: 0.97; /* the measured :active feedback, on controls only */

  /* Focus is DERIVED. The reference answers focus-visible by swapping a
     border colour, which leaves a borderless control with no focus state at
     all. A 2px ring in --accent at 2px offset measures 4.93:1 against --bg,
     clearing the 3:1 non-text floor with room. */
  --focus-ring: 2px;
  --focus-offset: 2px;
}

[data-theme="dark"] {
  --bg: #080706;      /* the reference's html field; :root/:host carries #0c0b0a */
  --panel: #0c0b0a;
  --panel-2: #171513; /* --color-background-2 (dark) */

  --ink: #fffcf8;     /* --color-neutral-1 (dark) */

  /* The dark ramp is a different set of alphas, not the light one inverted —
     70 / 50 / 20 / 10 / 4 against the light theme's 72 / 55 / 22 / 12 / 5. */
  --inset: rgba(255, 252, 248, 0.04); /* = --ink at 4% */
  --ink-2: rgba(255, 252, 248, 0.70); /* = --ink at 70% */
  --muted: rgba(255, 252, 248, 0.50); /* = --ink at 50% */
  --faint: rgba(255, 252, 248, 0.20); /* = --ink at 20% */
  --border: rgba(255, 252, 248, 0.10); /* = --ink at 10% */
  --border-strong: rgba(255, 252, 248, 0.20); /* = --ink at 20% */

  --row-hover: #212121; /* --hero-table-row-hover (dark) */

  --accent: #f49556;      /* --color-theme-1-text (dark) — 8.89:1 on --bg */
  --accent-mark: #e8792f; /* the fill is the same hue in both themes */
  --accent-line: rgba(232, 121, 47, 0.35); /* = --accent-mark at 35% */
  --accent-weak: rgba(232, 121, 47, 0.08); /* = --accent-mark at 8% */

  --on-ink: #14100c; /* the ink button inverts with the theme, so its text does too */

  --info: #22d3ee; /* --color-theme-2 (dark) */
  --info-weak: rgba(34, 211, 238, 0.10); /* = --info at 10% */
  /* Derived, and a different step from the light theme's: at amber-500 the dark
     accent and the warning are 7.1 apart at full colour — one colour with two
     meanings. amber-300 is 16.2 apart and clears every dichromacy. */
  --warn: oklch(87.9% 0.169 91.605);
  --warn-weak: rgba(250, 204, 100, 0.12);

  --shadow-1: 0 0 0 1px #ffffff0a, 0 30px 90px #00000080; /* --hero-demo-shadow (dark) */
}

/* Motion is a state change here, never an entrance for its own sake. Reduced
   motion zeroes the durations and stops the three loops this pack allows (the
   typing cursor, the thinking dots, the live heartbeat) — the same answer the
   reference gives, which turns its transitions off rather than slowing them. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-xs: 0s;
    --dur-sm: 0s;
    --dur: 0s;
    --dur-lg: 0s;
    --dur-xl: 0s;
    --press-scale: 1;
  }
}


/* THE LITERALS ABOVE ARE THE FALLBACK, AND THEY ONLY WORK FROM IN HERE.
   A custom property accepts almost any token sequence, so
   `--x: rgb(from …)` PARSES even where relative colour is unsupported: it
   wins the cascade, and the invalidity surfaces only at substitution, as
   invalid-at-computed-value-time. By then the literal declaration is gone
   and every `var(--x)` falls back to `unset` — not to the line above it.
   Measured 2026-08-20: 23 custom properties across this pack and
   `showroom` shipped literal-then-relative and read as guarded. `@supports`
   is the mechanism that actually guards them. */
@supports (color: rgb(from red r g b)) {
  :root {
    --inset: rgb(from var(--ink) r g b / 0.05);
    --ink-2: rgb(from var(--ink) r g b / 0.72);
    --muted: rgb(from var(--ink) r g b / 0.55);
    --faint: rgb(from var(--ink) r g b / 0.22);
    --border: rgb(from var(--ink) r g b / 0.12);
    --border-strong: rgb(from var(--ink) r g b / 0.22);
    --accent-line: rgb(from var(--accent) r g b / 0.30);
    --accent-weak: rgb(from var(--accent-mark) r g b / 0.06);
    --ok-weak: rgb(from var(--ok) r g b / 0.10);
    --danger-weak: rgb(from var(--danger) r g b / 0.10);
    --info-weak: rgb(from var(--info) r g b / 0.10);
    --warn-weak: rgb(from var(--warn) r g b / 0.12);
  }
  [data-theme="dark"] {
    --inset: rgb(from var(--ink) r g b / 0.04);
    --ink-2: rgb(from var(--ink) r g b / 0.70);
    --muted: rgb(from var(--ink) r g b / 0.50);
    --faint: rgb(from var(--ink) r g b / 0.20);
    --border: rgb(from var(--ink) r g b / 0.10);
    --border-strong: rgb(from var(--ink) r g b / 0.20);
    --accent-line: rgb(from var(--accent-mark) r g b / 0.35);
    --accent-weak: rgb(from var(--accent-mark) r g b / 0.08);
    --info-weak: rgb(from var(--info) r g b / 0.10);
    --warn-weak: rgb(from var(--warn) r g b / 0.12);
  }
}