/* ==========================================================================
   theme-clubx.css — Huisstijl / brand tokens voor Club X (DEMO)
   ==========================================================================
   Tweede demo-organisatie, om te laten zien dat base.css écht clubonafhankelijk
   is: dit bestand verandert alleen kleuren/font/schaduw, verder niets.
   Grijs/zwart palet, neutraal lettertype (i.p.v. het sportieve italic-font
   van Blauw Geel '38) — juist om het contrast met de andere club te tonen.
   ========================================================================== */

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

:root{
  /* --- 1. Kleurenpalet (primitives) --- */
  --color-navy-900:#09090b;
  --color-navy-800:#18181b;
  --color-navy-700:#27272a;
  --color-navy-600:#3f3f46;
  --color-navy-500:#52525b;

  --color-blue-700:#3f3f46;
  --color-blue-600:#52525b;
  --color-blue-500:#71717a;
  --color-blue-400:#a1a1aa;
  --color-blue-300:#d4d4d8;
  --color-blue-100:#e4e4e7;
  --color-blue-50:#f4f4f5;

  --color-orange-700:#27272a;
  --color-orange-600:#3f3f46;
  --color-orange-500:#52525b;
  --color-orange-400:#71717a;

  --color-gold-600:#52525b;
  --color-gold-500:#71717a;
  --color-gold-400:#a1a1aa;

  --color-white:#ffffff;
  --color-grey-50:#fafafa;
  --color-grey-100:#f4f4f5;
  --color-grey-200:#e4e4e7;
  --color-grey-300:#d4d4d8;
  --color-grey-500:#71717a;
  --color-grey-700:#3f3f46;

  /* --- 2. Merk-rollen --- */
  --brand-primary:var(--color-navy-800);
  --brand-secondary:var(--color-blue-500);
  --brand-secondary-dark:var(--color-blue-700);
  --brand-secondary-soft:var(--color-blue-50);
  --brand-accent:var(--color-orange-600);       /* grijs/zwart i.p.v. felle merkkleur */
  --brand-accent-hover:var(--color-navy-900);
  --brand-focus:var(--color-blue-500);
  --brand-focus-soft:rgba(113,113,122,.18);

  /* --- 3. Semantische tokens --- */
  --surface-page:var(--color-grey-50);
  --surface-auth-bg:radial-gradient(circle at 15% 15%, rgba(255,255,255,.06), 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:#b8b8bd;
  --text-on-accent:var(--color-white);
  --text-accent:var(--color-navy-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,.14);

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

  /* --- 4. Typografie --- */
  --font-display:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-data:"Inter","Helvetica Neue",Arial,sans-serif;

  /* Geen italic sportfont hier — bewust zakelijker/neutraler dan Blauw Geel '38. */
  --text-brand-word:      700 18px/1 var(--font-display);
  --text-brand-heading:   800 28px/1.15 var(--font-display);
  --text-brand-subheading:600 18px/1.3 var(--font-display);
  --text-brand-cardcode:  800 32px/1 var(--font-display);

  /* --- 5. Schaduwen --- */
  --shadow-card:0 1px 2px rgba(9,9,11,.06), 0 2px 8px rgba(9,9,11,.06);
  --shadow-card-hover:0 2px 4px rgba(9,9,11,.08), 0 10px 24px rgba(9,9,11,.12);
  --shadow-overlay:0 18px 48px rgba(9,9,11,.28);
}

/* Club X gebruikt geen uppercase/italic titels — bewust anders dan
   Blauw Geel '38, om te laten zien dat óók de typografische "vorm" van
   koppen per club kan verschillen zonder base.css aan te raken. */
.auth-club-name,
.welcome h1,
.brand-word{
  text-transform:none;
  letter-spacing:normal;
  margin:0;
}
.auth-body h1{
  text-transform:none;
  letter-spacing:normal;
}
.team-code{
  font-style:normal;
}