/* =============================================================
   RetroGhostLabs – design tokens (RGL-ae1)
   The ONLY stylesheet allowed to contain colour literals (scripts/check-brand.js).

   Base palette comes from the brand kit: /brand/diamondops/themes/themes.css defines
   --bg/--surface/--ink/--muted/--line/--mk-* per [data-theme]. This site uses two of
   those themes: glacier (dark, default) and daylight (light). The <head> snippet on each
   page picks one from the saved choice or prefers-color-scheme; nav.js has the toggle.

   Everything below maps the site's own token names onto the kit, plus the few values
   the kit doesn't carry (owner decisions recorded on RGL-ae1, 2026-11-05).
   ============================================================= */

/* ===== FONTS (kit/diamondops/fonts, SIL OFL 1.1) ===== */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/brand/diamondops/fonts/woff2/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/brand/diamondops/fonts/woff2/plex-sans.woff2') format('woff2');
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/brand/diamondops/fonts/woff2/plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/brand/diamondops/fonts/woff2/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/brand/diamondops/fonts/woff2/plex-mono-600.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}

/* ===== SITE TOKENS (theme-independent mapping onto the kit) ===== */
:root {
  --font-heading: 'Barlow Condensed', var(--font-text-fallback);
  --font-body: 'IBM Plex Sans', var(--font-text-fallback);
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-text-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --bg-primary: var(--bg);
  --bg-secondary: var(--surface);
  --bg-tertiary: color-mix(in srgb, var(--surface) 70%, var(--line));
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-dim: var(--muted);
  --border: var(--line);

  /* Tints and shades of the accent, for washes, borders and glows. */
  --accent-wash: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);
  --shadow: color-mix(in srgb, var(--accent) 15%, transparent);
  --glow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
          0 10px 40px color-mix(in srgb, var(--accent) 18%, transparent);

  --shade: #000;        /* drop shadows and scrims; always mixed with transparency */
  --white: #fff;        /* Apple's white badge / text on photos only */
}

/* ===== DARK: Glacier ===== */
:root,
[data-theme="glacier"] {
  --accent: var(--mk-1, #19D3DA);
  --accent-dim: color-mix(in srgb, var(--accent) 82%, var(--bg));
  --on-accent: #06141B;
  --ghost: #F0B442;     /* the one RGL-only colour: the ghost stays amber (owner) */
  --ok: #3DDC97;
  --warn: #F0B442;
  --danger: #FF6B6B;
  --on-danger: #1A0505;
  /* Chart series: apps must stay distinguishable in charts, so these are the one place
     the site uses more than the accent. Order = assets/js/rgl-data.js. */
  --series-1: #19D3DA; --series-2: #F0B442; --series-3: #FF7A90; --series-4: #A78BFA; --series-5: #8A9BB0;
  --series-6: #3DDC97; --series-7: #F28C5B;
}

/* ===== LIGHT: Daylight ===== */
[data-theme="daylight"] {
  /* The kit's #0B8C99 is 3.7:1 on --bg; this deeper teal passes AA for text even on
     the accent-tinted badges (5.8:1 on --bg). */
  --accent: #066A75;
  --accent-dim: #04545D;
  --on-accent: #FFFFFF;
  --ghost: #9A6A00;
  --ok: #136B40;
  --warn: #8A5A00;
  --danger: #B3261E;
  --on-danger: #FFFFFF;
  --series-1: #077480; --series-2: #9A6A00; --series-3: #C2384F; --series-4: #6D4FC9; --series-5: #5A6B80;
  --series-6: #136B40; --series-7: #A8471A;
}

/* ===== OTHER BRANDS SHOWN ON THIS SITE ===== */
:root {
  /* AlbumQuest keeps its own poster palette (brand/albumquest/brand.json colours.brand). */
  --aq-page: #ffe14d;
  --aq-ink: #141414;
  --aq-hot: #ff5a8a;
  --aq-cool: #4dd2ff;
}