/* ROC Regeneratives Centrum — design tokens.
   This is the ONLY file you change to re-brand the portal for another
   customer: set the colours here, replace static/logo.svg, done.

   --brand is sampled straight from the official ROC wordmark (#0F2C52 was the
   dominant colour of 13.9% of the logo's pixels), so it is no longer a guess.
   The remaining shades are derived from it. Contrast was verified: every text
   pairing is AA or better, and --focus/--field clear the 3:1 that WCAG 1.4.11
   requires for interactive borders. Re-check those two if you change --brand. */

:root {
  --brand:       #0F2C52;   /* ROC navy — MEASURED from the official logo   */
  --brand-deep:  #0B203B;   /* deeper navy — buttons, focus ring            */
  --brand-ink:   #ffffff;   /* text on navy                        */
  --brand-50:    #EAF1F8;   /* light fills, badges, dropzone       */
  --brand-200:   #C3D5E8;   /* borders, hairlines                  */

  --ink:         #1d2733;   /* body text   */
  --ink-soft:    #5b6675;   /* muted text  */
  --surface:     #ffffff;
  --page:        #f3f7fb;   /* airy ROC backdrop */
  --radius:      10px;
  --track:       2px;       /* letter-spacing for uppercase labels */

  /* Accessibility tokens (WCAG 2.1). --brand-200 is a decorative hairline at
     1.50:1 — fine for dividers, but NOT enough to identify an interactive
     control (1.4.11 requires >= 3:1). Interactive borders and the focus ring
     therefore use their own, verified values:
       --field  #7A8DA3  -> 3.41:1 on white, 3.16:1 on --page
       --focus  #0E2A48  -> 14.55:1 on white, 13.52:1 on --page
     Keep both above 3:1 against every surface they can land on if you re-brand. */
  --field:       #7A8DA3;   /* borders of inputs/selects — must stay >= 3:1 */
  --focus:       #0B203B;   /* focus ring (= brand-deep) — must stay >= 3:1 */
}

/* Self-host the real ROC webfont here instead of loading Google Fonts
   (DSGVO — same reasoning as planetfox.biz). Drop the woff2 in
   /static/fonts/ and confirm the family name via DevsTools.
@font-face {
  font-family: "ROC Sans";
  src: url("/static/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
*/
:root { --brand-font: "ROC Sans", "Montserrat", system-ui, -apple-system, sans-serif; }