/* Minute Papillons brand layer — print.minutepapillons.org
 *
 * Tokens extracted from minutepapillons.org (static/css/head-inline.css):
 *   --fond  #fef8ed  warm cream background
 *   --titre #c83d4c  red headings
 *   --texte #853349  plum body text
 * Content width 700px, wide 1280px.
 *
 * Loaded AFTER bootstrap.min.css so these values win where they overlap.
 * This file only sets tokens + font-faces; the layout (navbar, form) is
 * Bootstrap + a small amount of page CSS.
 */

@font-face {
  font-family: 'giant-boys';
  src: url('/static/fonts/Giant-Boys.woff2') format('woff2'),
       url('/static/fonts/Giant-Boys.woff') format('woff');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'neue-machina';
  src: url('/static/fonts/NeueMachina-Regular.otf') format('opentype');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

:root {
  /* Brand palette */
  --fond: #fef8ed;
  --titre: #c83d4c;
  --texte: #853349;

  /* Derived neutrals (kept close to the org's contrast tokens) */
  --texte-doux: #a2687a;
  --bord: #e6d9c8;

  /* Layout */
  --content: 700px;
  --wide: 1280px;

  /* Typography */
  --font-titre: 'giant-boys', Cardo, Georgia, serif;
  --font-texte: 'neue-machina', 'Inter', -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Bootstrap 5.3 token overrides — Bootstrap reads these custom properties,
     so the framework follows the brand without recompiling. */
  --bs-body-bg: var(--fond);
  --bs-body-color: var(--texte);
  --bs-body-font-family: var(--font-texte);
  --bs-link-color: var(--texte);
  --bs-link-hover-color: var(--titre);
  --bs-link-color-rgb: 133, 51, 73;
  --bs-link-hover-color-rgb: 200, 61, 76;
  --bs-border-color: var(--bord);
  --bs-emphasis-color: var(--titre);
  --bs-heading-color: var(--titre);
  --bs-primary: var(--titre);
  --bs-primary-rgb: 200, 61, 76;
}

/* Headings use the display face, like the org site. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-titre);
  font-weight: 400;
  color: var(--titre);
}

a { color: var(--texte); }
a:hover { color: var(--titre); }

/* Brand button: near-black pill, cream label (mirrors the org's button). */
.btn-brand {
  --bs-btn-bg: #111;
  --bs-btn-color: var(--fond);
  --bs-btn-border-color: #111;
  --bs-btn-hover-bg: #333;
  --bs-btn-hover-border-color: #333;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-color: #fff;
  border-radius: .33rem;
  font-weight: 500;
}

/* Form controls tinted for the brand (Bootstrap's own focus ring kept). */
.form-control:focus {
  border-color: var(--titre);
  box-shadow: 0 0 0 .25rem rgba(200, 61, 76, .2);
}

/* Utility: center content at the org's reading width. */
.container-brand { max-width: var(--content); }