/* ============================================================
   PSK content templates — design tokens

   Source of truth: prabhashankar-personal-website@main
   src/styles/theme.css, the "signal" terminal-minimal language.

   This file replaced an older system built on Ubuntu and the orange
   #fd5b0c. Neither survives. The site now runs two faces, Bebas Neue for
   headings and IBM Plex Mono for everything else, on the BuildXLR8 palette
   with Crayola Blue as the only accent. Corners are square throughout.

   The --psk-* names are kept because roughly 360 references across the
   renderers read them. Only the values behind them changed, so a single
   edit here restyles every template.
   ============================================================ */

/* Self-hosted so the gallery works offline and the PNG export never waits on
   a font request. Same two faces the site pulls from Google Fonts. */
@font-face { font-family: 'Bebas Neue';   src: url('fonts/BebasNeue-400.woff2') format('woff2');   font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: block; }

:root {
  /* ── Palette. Official BuildXLR8 brand colours, unmixed. ── */
  --crayola-blue:  #0075ff;
  --prussian-blue: #051229;
  --alice-blue:    #e1e8f0;
  --bright-snow:   #f7f7f7;
  --pale-slate:    #a9b0b8;
  --near-black:    #0d1b2a;

  /* ── Accent ──
     Two strengths, exactly as the site. Pure Crayola Blue fails contrast on
     small text against a light ground, so labels and links use the darker
     cast while fills, bars and large numerals keep the pure blue. */
  --psk-brand:          var(--crayola-blue);
  --psk-brand-text:     #0057c2;
  --psk-brand-2:        #4d9bff;
  --psk-brand-gradient: var(--crayola-blue);

  --psk-brand-50:  #eaf3ff;
  --psk-brand-100: #cfe3ff;
  --psk-brand-200: #9cc6ff;
  --psk-brand-300: #6aa9ff;
  --psk-brand-400: #338cff;
  --psk-brand-500: #0075ff;
  --psk-brand-600: #0057c2;
  --psk-brand-700: #003f8c;
  --psk-brand-800: #002856;
  --psk-brand-900: #051229;

  --psk-positive: #12703a;
  --psk-negative: #b3000b;
  --psk-caution:  #a35a00;
  --psk-information: var(--crayola-blue);

  /* ── Light theme ── */
  --psk-fg-1: var(--near-black);
  --psk-fg-2: #55606d;
  --psk-fg-3: #7d8896;
  --psk-fg-on-brand: #ffffff;

  --psk-bg:        var(--bright-snow);
  --psk-bg-alt:    var(--alice-blue);
  --psk-bg-tinted: rgba(0, 117, 255, 0.08);
  --psk-card-bg:     #ffffff;
  --psk-card-border: #cfd8e3;
  --psk-grid-line:   #e3e8ef;

  /* ── Square everywhere. The site has no rounded corners except nav dots. ── */
  --psk-radius-sm: 0;
  --psk-radius-md: 0;
  --psk-radius-lg: 0;
  --psk-radius-pill: 0;

  /* ── Type. Mono carries everything; Bebas carries headings. ── */
  --psk-font-sans:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --psk-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --psk-font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
}

[data-theme="dark"] {
  --psk-fg-1: #f2f5f9;
  --psk-fg-2: #9aa8bb;
  --psk-fg-3: #6f7d90;

  --psk-bg:        var(--prussian-blue);
  --psk-bg-alt:    #08172e;
  --psk-bg-tinted: rgba(0, 117, 255, 0.16);
  --psk-card-bg:     #0a1a33;
  --psk-card-border: #1c3153;
  --psk-grid-line:   #0d2242;

  /* Small mono text needs the lifted accent to hold contrast on the dark
     ground; the pure blue stays for fills. */
  --psk-brand-text: #64aaff;
}