/*
 * brand.css — Valais+ "All Subjects" shared design tokens (FOUNDATION ONLY).
 *
 * Editorial/archival "almanac" system, per the brand book / tile reference
 * pack: white or paper (#F3EFE8) surfaces, thin #E0E0E0 borders, IBM Plex
 * Serif display headlines, IBM Plex Sans body copy, IBM Plex Mono uppercase
 * letter-spaced labels/metadata, a crimson (#A62122) accent for kickers,
 * rules, buttons and badges, and slate (#404D52) for inverse/secondary
 * surfaces.
 *
 * Scope: pure token + utility sheet. Class/var names are generic (no
 * #walk-editor or other surface scoping) so any page can opt in just by
 * loading this file. This pass adds tokens + utilities only — no existing
 * component is restyled here, and this file is not yet <link>-ed anywhere.
 *
 * Font families below are referenced, not vendored: the consuming surface
 * is responsible for loading IBM Plex Serif/Sans/Mono. Fallback stacks keep
 * things legible without them.
 */

:root {
  /* Carbon gray scale */
  --g-white: #FFFFFF;
  --g-10: #F4F4F4;
  --g-20: #E0E0E0;
  --g-30: #C6C6C6;
  --g-40: #A8A8A8;
  --g-50: #8D8D8D;
  --g-60: #6F6F6F;
  --g-70: #525252;
  --g-80: #393939;
  --g-90: #262626;
  --g-100: #161616;

  /* Accents */
  --crimson: #A62122;
  --crimson-hover: #8E1C1D;
  --crimson-soft: #F6E4E4;
  --slate: #404D52;
  --slate-hover: #344044;
  --slate-soft: #E8ECEE;

  /* Paper */
  --paper: #F3EFE8;

  /* Type families */
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 56 / 80 / 120 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 56px;
  --sp-9: 80px;
  --sp-10: 120px;
}

/* ---------- surfaces ---------- */

/* Paper field with a faint 24px dot grid (slate @ 10%). */
.brand-paper {
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgba(64, 77, 82, 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---------- type scale ---------- */

.t-display { font-family: var(--font-serif); font-weight: 300; font-style: italic; font-size: 88px; line-height: 84px; }
.t-section { font-family: var(--font-serif); font-weight: 300; font-size: 56px; line-height: 1.05; }
.t-title   { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 17px; }
.t-lede    { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: 17px; line-height: 1.5; }
.t-body    { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 22px; }
.t-ui      { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 18px; }
.t-mono    { font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 14px; letter-spacing: 0.32px; }
.t-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: 1.6px; text-transform: uppercase; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-sm { height: 32px; padding: 0 var(--sp-4); }
.btn-lg { height: 56px; padding: 0 var(--sp-6); }

.btn-primary { background: var(--crimson); border-color: var(--crimson); color: var(--g-white); }
.btn-primary:hover { background: var(--crimson-hover); border-color: var(--crimson-hover); }

.btn-secondary { background: var(--slate); border-color: var(--slate); color: var(--g-white); }
.btn-secondary:hover { background: var(--slate-hover); border-color: var(--slate-hover); }

.btn-tertiary { background: transparent; border-color: var(--crimson); color: var(--crimson); }
.btn-tertiary:hover { background: var(--crimson-soft); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--crimson); }
.btn-ghost:hover { background: var(--crimson-soft); }

.btn-danger { background: var(--g-60); border-color: var(--g-60); color: var(--g-white); }
.btn-danger:hover { background: var(--g-70); border-color: var(--g-70); }

/* ---------- fields ---------- */

/* Carbon-style underlined field: flat gray-10 fill, single bottom rule. */
.brand-field {
  display: block;
  width: 100%;
  background: var(--g-10);
  border: none;
  border-bottom: 1px solid var(--g-50);
  border-radius: 0;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--g-100);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.brand-field::placeholder { color: var(--g-50); }
.brand-field:focus { border-bottom-color: var(--crimson); box-shadow: 0 1px 0 0 var(--crimson); }

/* ---------- chips ---------- */

/* Soft taxonomic pill, meant to sit on white surfaces. */
.chip-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-4);
  border-radius: 999px;
  background: var(--slate-soft);
  color: var(--slate);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Mono outline filter chip, meant to sit on .brand-paper. */
.chip-mono {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--g-40);
  border-radius: 2px;
  background: transparent;
  color: var(--g-70);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.chip-mono:hover,
.chip-mono.is-active {
  border-color: var(--crimson);
  color: var(--crimson);
}