/*
   design-spec-extras.css — project-specific design-spec page styles.

   The docs skill's `styles/docs.css` is project-agnostic; classes that
   reference specific display faces, brand-coloured numerals, or
   project-specific gradients live here so the skill stays migratable.

   Loaded ONLY into the design-spec output by generate_design_specs.py
   when this file exists. Other docs (PRD, build plan, app docs) don't
   include it.

   When a class in this file collides with one in docs.css, this file's
   declarations win (this file is loaded second).
*/

/* Display + body + mono fonts referenced by the typography-sample classes
   below. Inter + JetBrains Mono come from the skill's base font load
   (every page) — listed again here only to keep this file standalone.
   The rest are design-spec-only display faces. */


/* ========== Brand-illustration samples ========== */

/* Brand gradient sample. */
.brand-gradient {
  background: linear-gradient(90deg, #FF009F 0%, #961EEF 50%, #16B2EB 100%);
}

/* Neon sample — dark backdrop with magenta glow. */
.neon-sample {
  display: block;
  margin: 10pt 0 16pt 0;
  padding: 18pt 20pt;
  background: #0F0B1A;
  color: #FFFFFF;
  font-family: "Bebas Neue", "Anton", impact, sans-serif;
  font-size: 36pt;
  letter-spacing: 0.04em;
  text-align: center;
  border-radius: 4pt;
  border: 1.5pt solid #FF009F;
  box-shadow: 0 0 8pt 1pt #FF009F, 0 0 18pt 4pt rgba(255, 0, 159, 0.45);
  text-shadow: 0 0 8pt rgba(255, 0, 159, 0.65);
  page-break-inside: avoid;
}

/* ========== Typography sample tables ========== */

table.typography-samples { table-layout: fixed; }
table.typography-samples td {
  vertical-align: middle;
  padding: 14pt 9pt;
}
table.typography-samples td:first-child {
  width: 22%;
  font-weight: 600;
  color: #2A5F65;
}

/* Display face samples */
.sample-display-bebas,
.sample-display-anton,
.sample-display-oswald {
  font-size: 30pt;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #2B2B2A;
  line-height: 1;
}
.sample-display-bebas  { font-family: "Bebas Neue", impact, sans-serif; }
.sample-display-anton  { font-family: "Anton", impact, sans-serif; }
.sample-display-oswald { font-family: "Oswald", impact, sans-serif; font-weight: 700; }

/* Numeral samples — brand-coloured magenta. */
.sample-numeral-bebas,
.sample-numeral-anton,
.sample-numeral-oswald {
  font-size: 40pt;
  font-weight: 400;
  color: #FF009F;
  line-height: 1;
}
.sample-numeral-bebas  { font-family: "Bebas Neue", impact, sans-serif; }
.sample-numeral-anton  { font-family: "Anton", impact, sans-serif; }
.sample-numeral-oswald { font-family: "Oswald", impact, sans-serif; font-weight: 700; }

/* Body face samples */
.sample-body-inter,
.sample-body-manrope,
.sample-body-dm-sans {
  font-size: 12pt;
  line-height: 1.5;
  color: #2B2B2A;
}
.sample-body-inter   { font-family: "Inter", system-ui, sans-serif; }
.sample-body-manrope { font-family: "Manrope", system-ui, sans-serif; }
.sample-body-dm-sans { font-family: "DM Sans", system-ui, sans-serif; }

/* Mono samples */
.sample-mono-jetbrains,
.sample-mono-plex {
  font-size: 11pt;
  color: #2B2B2A;
}
.sample-mono-jetbrains { font-family: "JetBrains Mono", "Consolas", monospace; }
.sample-mono-plex      { font-family: "IBM Plex Mono", "Consolas", monospace; }