/*
 * RenderATL Design System — token layer (RU-056, epic RU-055 / #75)
 * ------------------------------------------------------------------
 * Single source for the RenderATL University palette + type tokens.
 * Ported verbatim from the official DS `source/theme.css` token set
 * (Claude Design project f282c5a2-c10f-4533-b4d5-d8cf7e0c1390,
 *  design system renderatl-design-system-abbff49c…).
 *
 * Values are bare HSL triplets (`H S% L%`) so they compose as
 * `hsl(var(--bg))` or `hsl(var(--fg) / 0.6)` for alpha. Light lives on
 * `:root`; dark overrides under `[data-theme="dark"]`.
 *
 * Dark-mode toggle/plumbing is RU-058; Button/Badge classes are RU-059.
 * Do not hand-apply tokens here; later phase issues restyle surfaces.
 */

/* ------------------------------------------------------------------
 * Self-hosted brand fonts (RU-057). Zero external font requests.
 *
 * Roboto — body/UI, Apache-2.0, fsType 0x0 (installable). Files vendored
 * in ../media/fonts/. Feeds --font-sans.
 *
 * Mortend (display) is NOT embedded: the brand-kit files are Preview &
 * Print only (fsType 0x4) and web self-hosting needs a purchased Webfont
 * license. Until then --font-display falls back to "Arial Black".
 * See docs/mortend-roboto-font-license-check.md.
 * ------------------------------------------------------------------ */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/fonts/Roboto-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/fonts/Roboto-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/fonts/Roboto-Bold.ttf") format("truetype");
}

/* Interim bridge (RU-057 → Phase 2): surfaces not yet migrated to the DS
 * tokens still hard-code "Instrument Sans" (the retired Google body font).
 * Alias it to the vendored Roboto — its DS-sanctioned replacement — so body
 * text stays on-brand between phases. Remove once surfaces use var(--font-sans). */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/fonts/Roboto-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/fonts/Roboto-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../media/fonts/Roboto-Bold.ttf") format("truetype");
}

/* The retired display + mono Google families (Archivo Black, Space Mono) have
 * no licensed self-hosted source, so alias them by NAME to their DS-intended
 * fallbacks. Remove in Phase 2 once surfaces use var(--font-display)/var(--font-mono).
 *
 * Archivo Black → heavy display face: prefer a local Arial Black (Win/Mac), but
 * fall back to the vendored Roboto Bold so platforms without Arial Black
 * (Linux/ChromeOS) still get a real bold face rather than generic thin sans.
 * The url() reuses an already-vendored file — no extra network request. */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400 900;
  src: local("Arial Black"), local("Arial-Black"),
       url("../media/fonts/Roboto-Bold.ttf") format("truetype");
}
/* Space Mono → system mono (--font-mono); the elements' own `monospace` generic
 * is an acceptable last resort, so local()-only is fine here. */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400 700;
  src: local("SFMono-Regular"), local("SF Mono"), local("Menlo");
}

:root {
  /* Signature brand */
  --pink: 326 57% 66%;      /* Tickle Me Pink #DA78AF */
  --indigo: 238 95% 24%;
  --lean: 326 57% 66%;
  --accent: 326 57% 66%;

  /* Ground + surfaces (cream light) */
  --bg: 43 33% 94%;
  --card: 0 0% 100%;
  --card-2: 41 33% 97%;
  --cream: 40 40% 97%;

  /* Text */
  --fg: 250 8% 11%;
  --ink: 250 8% 11%;
  --heading: 238 95% 24%;   /* indigo */
  --muted: 40 7% 39%;

  /* Lines */
  --border: 41 26% 86%;
  --border-strong: 42 25% 75%;

  /* Categorical (charts / tags — group-of-4, use sparingly).
   * These are consumed only as part accents (accentFor: label text + a 4px
   * accent border). Coral/teal are darkened from the raw DS chart values so
   * they clear WCAG AA (>=4.5) as label text on the cream/white surfaces
   * (RU-071); indigo is already dark. Dark-theme values (below) stay light,
   * since they sit on the indigo ground. */
  --cat-sunglow: 47 99% 55%;
  --cat-teal: 176 100% 22%;
  --cat-coral: 7 84% 40%;
  --cat-indigo: 238 95% 24%;

  /* Semantic status (always pair with a label + shape, never color alone) */
  --success: 176 100% 30%;
  --warning: 47 99% 55%;
  --warning-ink: 40 100% 28%;   /* RU-071: -2% so the gold badge clears AA */
  --danger: 7 84% 60%;

  /* On-tint text shades (RU-071). The DS badge recipe paints same-hue text on a
   * 15% tint of the hue; for the mid-lightness hues that lands at 2–3:1 in light,
   * so badge/accent TEXT reads from a darkened `-ink` shade instead (the tint
   * BACKGROUND still uses the base token). Mirrors the DS's own --warning-ink.
   * Under [data-theme="dark"] and .ru-invert these revert to the base tone,
   * which is already light-on-dark. Values solved for >=4.5 on card/card-2/bg. */
  --accent-ink: 326 57% 44%;
  --success-ink: 176 100% 21%;
  --danger-ink: 7 84% 40%;
  --teal-ink: 176 100% 22%;

  /* Named brand aliases */
  --gold: 47 99% 55%;
  --wine: 238 95% 24%;
  --teal: 176 100% 36%;

  /* Type — Mortend display (ALL-CAPS only), Roboto body/UI */
  --font-display: "Mortend", "Arial Black", sans-serif;
  --font-heading: var(--font-sans), "Helvetica Neue", "Arial", sans-serif;
  --font-sans: var(--font-roboto, "Roboto"), "Helvetica Neue", "Arial", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;
}

[data-theme="dark"] {
  /* Signature brand (lightened for the indigo ground) */
  --pink: 326 62% 70%;
  --indigo: 235 80% 81%;
  --lean: 326 62% 70%;
  --accent: 326 62% 70%;

  /* Ground + surfaces (indigo dark) */
  --bg: 238 87% 12%;
  --card: 237 78% 18%;
  --card-2: 236 72% 22%;
  --cream: 40 40% 97%;

  /* Text */
  --fg: 244 44% 95%;
  --ink: 244 44% 95%;
  --heading: 244 44% 98%;
  --muted: 233 33% 74%;

  /* Lines */
  --border: 235 57% 32%;
  --border-strong: 235 49% 42%;

  /* Categorical */
  --cat-sunglow: 47 99% 58%;
  --cat-teal: 176 90% 45%;
  --cat-coral: 7 100% 74%;
  --cat-indigo: 235 80% 81%;

  /* Semantic status */
  --success: 176 90% 45%;
  --warning: 47 99% 58%;
  --warning-ink: 47 99% 62%;
  --danger: 7 100% 74%;

  /* On-tint text shades revert to the (already light) base tones on the dark
   * ground, so badge/accent text stays legible without the light-mode darkening. */
  --accent-ink: var(--accent);
  --success-ink: var(--success);
  --danger-ink: var(--danger);
  --teal-ink: var(--teal);

  /* Named brand aliases */
  --gold: 47 99% 58%;
  --wine: 235 80% 81%;
  --teal: 176 90% 45%;
}

/* ==================================================================
 * Component primitives (RU-059, epic RU-055 / #78)
 * ------------------------------------------------------------------
 * Vanilla-CSS ports of the DS `@renderatl/ui` primitives so the dc
 * template bindings and standalone pages can share one button/badge
 * contract. Translated 1:1 from source/button.tsx + source/badge.tsx
 * (Tailwind → CSS): colors are `hsl(var(--token) / a)`, `rounded-sm`
 * is the preset's 6px, focus is a 2px ring on a 2px --bg offset.
 * Values driven entirely by the token layer above, so light/dark and
 * the RU-058 [data-theme] flip come for free.
 * ================================================================== */

/* ---- Button ------------------------------------------------------ */
.ru-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px 20px;                 /* py-2.5 px-5 */
  font-family: var(--font-sans);
  font-size: 14px;                    /* text-sm */
  line-height: 20px;
  font-weight: 600;                   /* font-semibold */
  text-transform: uppercase;
  letter-spacing: 0.05em;             /* tracking-wider */
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ru-btn:focus-visible {
  outline: none;
  /* focus:ring-2 ring-offset-2 ring-offset-bg — inner offset in --bg, then the ring */
  box-shadow: 0 0 0 2px hsl(var(--bg)), 0 0 0 4px var(--ru-btn-ring, hsl(var(--ink) / 0.4));
}
.ru-btn:disabled,
.ru-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* variants (default = primary).
 * Note: the DS source is `bg-ink text-white`, but `--ink` lightens to near-white
 * in dark mode (per the DS dark tokens), so a literal white foreground collides
 * (white-on-white). Foreground is the ground color `--bg` instead: near-white in
 * light (visually matches the reference and the app's existing cream-on-ink
 * buttons) and dark in dark, so filled buttons stay legible in both themes. */
/* Primary is also the bare-`.ru-btn` default, so it's selected as "a .ru-btn
 * that carries no colour variant" — this keeps primary's fill + hover from
 * leaking onto secondary/ghost/danger, which only override some properties. */
.ru-btn--primary,
.ru-btn:not(.ru-btn--secondary):not(.ru-btn--ghost):not(.ru-btn--danger) {
  background: hsl(var(--ink));
  color: hsl(var(--bg));
  --ru-btn-ring: hsl(var(--accent) / 0.4);
}
.ru-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.ru-btn:not(.ru-btn--secondary):not(.ru-btn--ghost):not(.ru-btn--danger):hover:not(:disabled):not([aria-disabled="true"]) {
  background: hsl(var(--accent));
}

.ru-btn--secondary {
  background: hsl(var(--card));
  color: hsl(var(--fg));
  border-color: hsl(var(--border));
  --ru-btn-ring: hsl(var(--ink) / 0.2);
}
.ru-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) { border-color: hsl(var(--ink) / 0.4); }

.ru-btn--ghost {
  background: transparent;
  color: hsl(var(--fg));
  --ru-btn-ring: hsl(var(--ink) / 0.2);
}
.ru-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: hsl(var(--border) / 0.5); }

.ru-btn--danger {
  background: hsl(var(--danger));
  /* RU-071: the coral --danger fill is light in BOTH themes (60% L light, 74% dark),
   * so near-white --bg text only made ~3:1 in light. Fixed dark ink clears AA on the
   * coral in either theme (5.05 light / 7.6 dark). Same idea as .ru-onbright. */
  color: hsl(250 8% 11%);
  --ru-btn-ring: hsl(var(--danger) / 0.4);
}
.ru-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.1); }

/* sizes — the DS ships one canonical size (above); these are convenience
 * scales for dense chrome + icon-only controls, on the same token contract. */
.ru-btn--sm { padding: 6px 14px; font-size: 12px; line-height: 16px; }
.ru-btn--lg { padding: 12px 24px; font-size: 15px; line-height: 22px; }
.ru-btn--icon { padding: 0; width: 40px; height: 40px; gap: 0; }
.ru-btn--icon.ru-btn--sm { width: 34px; height: 34px; }

/* ---- Badge ------------------------------------------------------- */
.ru-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 10px;                  /* py-1 px-2.5 */
  font-family: var(--font-sans);
  font-size: 0.68rem;                 /* text-[0.68rem] */
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* DS tones (default = neutral) */
.ru-badge,
.ru-badge--neutral { background: hsl(var(--border) / 0.6); color: hsl(var(--fg)); }
/* Tint background stays on the base tone; TEXT reads from the darkened `-ink`
 * shade so the label clears WCAG AA on the light tint (RU-071). */
.ru-badge--accent  { background: hsl(var(--accent) / 0.15); color: hsl(var(--accent-ink)); }
.ru-badge--success { background: hsl(var(--success) / 0.15); color: hsl(var(--success-ink)); }
.ru-badge--danger  { background: hsl(var(--danger) / 0.15); color: hsl(var(--danger-ink)); }
.ru-badge--muted   { background: transparent; color: hsl(var(--muted)); border-color: hsl(var(--border)); }
.ru-badge--ink     { background: hsl(var(--ink)); color: hsl(var(--bg)); }
/* University status extensions — curriculum readiness (see docs status map);
 * same 15%-tint recipe as the DS accent tone, on the brand status tokens. */
.ru-badge--gold { background: hsl(var(--gold) / 0.18); color: hsl(var(--warning-ink)); }
.ru-badge--teal { background: hsl(var(--teal) / 0.15); color: hsl(var(--teal-ink)); }
.ru-badge--wine { background: hsl(var(--wine) / 0.15); color: hsl(var(--wine)); }