/*
 * theme.css — Design tokens.
 *
 * One place for colours, fonts, spacing, radii, shadows. Components in app.css
 * and inline styles reference these variables, so re-branding a new app means
 * editing only this file. Defaults mirror the ASGS palette (navy + gold);
 * change --brand-* for a different club / product.
 */
:root {
  /* Brand */
  --brand-primary: #0C345A;        /* navy */
  --brand-primary-dark: #001427;
  --brand-accent: #C9A262;         /* gold */
  --brand-accent-hover: #bb9252;
  --brand-gold-soft: #e3cd9f;
  --brand-cream: #F7F3EA;          /* warm page background */
  --brand-line: #e7e0d2;           /* warm hairline */

  /* Neutrals */
  --neutral-50: #F9F9F9;
  --neutral-100: #F5F5F5;
  --neutral-200: #F2F2F2;
  --neutral-300: #E6E6E6;
  --neutral-500: #808080;
  --neutral-700: #393939;
  --neutral-900: #222222;

  /* Semantic */
  --color-success: #15803d;
  --color-success-bg: #dcfce7;
  --color-warning: #b45309;
  --color-warning-bg: #fef3c7;
  --color-danger: #b91c1c;
  --color-danger-bg: #fee2e2;
  --color-info: #1d4ed8;
  --color-info-bg: #dbeafe;

  /* Typography */
  --font-sans: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;

  /* Spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;

  /* Radius */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 9999px;

  /* Shadow */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Background */
  --app-bg: #F7F3EA;   /* ASGS cream */
}

body {
  font-family: var(--font-sans);
  background-color: var(--app-bg);
  color: var(--neutral-900);
  font-size: 18px;       /* senior-friendly base (target audience 60+) */
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

[x-cloak] { display: none !important; }