/* Club AI design system for the Club Concierge AI site.
   Loads the Club AI tokens, then maps the old Cognexion token names (still used in the page markup
   and scripts) to Club AI values. Source: the club-ai-design skill (2026-09-26). */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/effects.css');

:root {
  /* Club AI type + shape (from the skill's typography/spacing tokens; only the names the site needs) */
  --font-sans: 'Jost', 'Neue Plak', Futura, 'Century Gothic', sans-serif;
  --font-accent: 'Cormorant Garamond', Garamond, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tracking-display: 0.04em; --tracking-caps: 0.22em; --tracking-label: 0.14em;
  --radius-0: 0; --radius-1: 2px; --radius-2: 6px; --radius-pill: 999px;
  --diamond: 7px;

  /* Bridge: Cognexion names -> Club AI values */
  --blue: var(--emerald-800);
  --blue-hover: var(--emerald-900);
  --blue-press: var(--emerald-900);
  --blue-tint: rgba(31, 74, 59, 0.08);
  --blue-ring: var(--emerald-100);
  --purple: var(--emerald-700);
  --purple-hover: var(--emerald-900);
  --purple-press: var(--emerald-950);
  --purple-tint: rgba(43, 92, 74, 0.08);
  --purple-muted: var(--emerald-300);
  --lavender: var(--emerald-100);

  --gray-900: var(--charcoal-900);
  --gray-700: var(--charcoal-700);
  --gray-500: var(--charcoal-500);
  --gray-300: var(--ivory-400);
  --gray-100: var(--ivory-300);
  --gray-50: var(--ivory-200);
  --white: var(--ivory-50);

  --dark-900: var(--charcoal-900);
  --dark-700: var(--charcoal-800);
  --dark-border: var(--border-inverse);
  --dark-text: var(--ivory-100);
  --dark-text-muted: rgba(239, 234, 219, 0.64);

  --success-bg: var(--emerald-100); --success-text: var(--emerald-800); --success-border: var(--emerald-300);
  --alert-bg: var(--burgundy-100); --alert-text: var(--burgundy-800); --alert-border: var(--burgundy-300);
  --info-bg: var(--teal-100); --info-text: var(--teal-800); --info-border: var(--teal-300);
  --error: var(--burgundy-600);

  --text-body: var(--charcoal-900);
  --text-tertiary: var(--charcoal-500);
  --surface-card: var(--ivory-50);
  --surface-subtle: var(--ivory-200);
  --surface-nav: var(--emerald-800);
  --border-subtle: var(--ivory-300);
  --border-input: var(--ivory-300);
  --accent-primary: var(--emerald-800);
  --accent-secondary: var(--teal-800);
  /* No gradients in Club AI: the old gradient tokens resolve to flat colour. */
  --gradient-brand-subtle: var(--emerald-100);
  --gradient-brand-tint: var(--emerald-100);

  --shadow-z1: none;
  --shadow-z2: var(--shadow-2);
  --shadow-z3: var(--shadow-2);
  --shadow-z4: var(--shadow-3);
  --backdrop: var(--surface-overlay);
  --blur-nav: none;
  --duration-fast: var(--dur-fast);
  --duration-base: var(--dur-base);
  /* Cognexion used --focus-ring as a box-shadow value. */
  --focus-ring: 0 0 0 3px rgba(92, 130, 114, 0.35);

  --radius-none: 0; --radius-badge: 999px; --radius-input: 2px; --radius-menu: 2px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal-900);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--emerald-800); text-decoration: none; }
a:hover { color: var(--emerald-900); }