/* ==========================================================================
   theme-blauwgeel38.css — Huisstijl / brand tokens voor Blauw Geel '38
   ==========================================================================
   Dit is het ENIGE bestand dat je per club aanpast. base.css blijft voor
   elke club identiek. Voor een nieuwe club: kopieer dit bestand naar
   theme-<slug>.css, pas de waarden hieronder aan, zet het logo in
   assets/logo-<slug>.(png|svg), en voeg de club toe aan includes/orgs.php.
   Zie css/theme-clubx.css voor een tweede, volledig ingevuld voorbeeld.

   Alle var(--...) namen hieronder worden door base.css gebruikt — wijzig
   de namen dus niet, alleen de waarden (en het lettertype-import bovenaan).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:ital,wght@0,600;0,700;1,700;1,800&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap");

:root{
  /* --- 1. Kleurenpalet (primitives) — sampled uit het clubcrest --- */
  --color-navy-900:#141535;
  --color-navy-800:#1d1e46;
  --color-navy-700:#272859;
  --color-navy-600:#343563;
  --color-navy-500:#43447a;

  --color-blue-700:#264a80;
  --color-blue-600:#2d5493;
  --color-blue-500:#345ea5;
  --color-blue-400:#5480bd;
  --color-blue-300:#8aa9d4;
  --color-blue-100:#dbe4f2;
  --color-blue-50:#eef3fa;

  --color-orange-700:#c06d15;
  --color-orange-600:#d97f1d;
  --color-orange-500:#f09026;
  --color-orange-400:#f4a54c;

  --color-gold-600:#e3a028;
  --color-gold-500:#f9b641;
  --color-gold-400:#fbc86b;

  --color-white:#ffffff;
  --color-grey-50:#f6f7fa;
  --color-grey-100:#eceef4;
  --color-grey-200:#d9dce6;
  --color-grey-300:#b8bccd;
  --color-grey-500:#767c94;
  --color-grey-700:#4a4f66;

  /* --- 2. Merk-rollen (welke primitive speelt welke rol) --- */
  --brand-primary:var(--color-navy-700);        /* hoofdkleur: topbar, headers */
  --brand-secondary:var(--color-blue-500);      /* accentkleur 2: badges, focus */
  --brand-secondary-dark:var(--color-blue-700);
  --brand-secondary-soft:var(--color-blue-50);
  --brand-accent:var(--color-orange-500);       /* actiekleur: knoppen, highlights */
  --brand-accent-hover:var(--color-orange-600);
  --brand-focus:var(--color-blue-500);
  --brand-focus-soft:rgba(52,94,165,.16);

  /* --- 3. Semantische tokens (dit gebruikt base.css rechtstreeks) --- */
  --surface-page:var(--color-grey-50);
  --surface-auth-bg:radial-gradient(circle at 15% 15%, rgba(240,144,38,.25), transparent 45%),
                    linear-gradient(135deg, var(--color-navy-900) 0%, var(--color-navy-700) 55%, var(--color-blue-600) 100%);
  --surface-card:var(--color-white);
  --surface-inverse:var(--brand-primary);

  --text-body:var(--color-navy-800);
  --text-muted:var(--color-grey-500);
  --text-heading:var(--brand-primary);
  --text-on-inverse:var(--color-white);
  --text-on-inverse-muted:#b6bfda;
  --text-on-accent:var(--color-navy-800);
  --text-accent:var(--color-orange-700);
  --text-link:var(--brand-secondary);
  --text-link-hover:var(--brand-primary);

  --border-subtle:var(--color-grey-200);
  --border-on-inverse:rgba(255,255,255,.18);

  --status-loss:#c93a3a;
  --status-loss-soft:#fae5e5;
  --status-loss-border:#f3c6c6;

  /* --- 4. Typografie --- */
  --font-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --font-data:"Barlow Semi Condensed","Barlow",sans-serif;

  /* Samengestelde font-shorthands die base.css gebruikt voor de merk-koppen.
     Wissel hier het lettertype/gewicht/stijl van een andere club uit. */
  --text-brand-word:      italic 800 18px/1 var(--font-display);
  --text-brand-heading:   italic 800 30px/1.1 var(--font-display);
  --text-brand-subheading:italic 700 19px/1.2 var(--font-display);
  --text-brand-cardcode:  italic 800 34px/1 var(--font-display);

  /* --- 5. Schaduwen (kleurtint hoort bij het merk, vandaar hier) --- */
  --shadow-card:0 1px 2px rgba(20,21,53,.06), 0 2px 8px rgba(20,21,53,.06);
  --shadow-card-hover:0 2px 4px rgba(20,21,53,.08), 0 10px 24px rgba(20,21,53,.12);
  --shadow-overlay:0 18px 48px rgba(20,21,53,.24);
}

/* Extra kop-styling: base.css zet h1/club-naam in kleur, hier voegen we
   de club-titel-tekst-transform toe die bij een italic condensed sportfont hoort. */
.auth-club-name,
.welcome h1,
.brand-word{
  text-transform:uppercase;
  letter-spacing:-0.01em;
  margin:0;
}
.auth-body h1{
  text-transform:uppercase;
  letter-spacing:-0.01em;
}
.team-code{
  font-style:italic;
}