/* ============================================================================
 * DESIGN TOKENS  (brief §4.10)
 * ----------------------------------------------------------------------------
 * EVERY color, font, and size in the app must reference one of these CSS
 * variables — never a hard-coded hex value or font name in component CSS.
 *
 * Why this matters: the future "Appearance & Branding" admin panel simply
 * stores a set of these token values (per global theme, or per-calendar
 * override) and injects them here at render time. Because the whole UI reads
 * from these variables, re-theming becomes a data change, not a code change.
 *
 * These are the neutral Adaptive Marketers PLACEHOLDER defaults. Swap the
 * values below once real brand colors/fonts/logo are supplied — the variable
 * NAMES stay the same, so nothing downstream breaks.
 * ========================================================================== */

:root {
  /* ---- Brand / primary palette ---- */
  --color-primary: #1f6feb;          /* main brand / primary actions */
  --color-primary-hover: #1a5fce;    /* primary hover state */
  --color-accent: #f2a900;           /* secondary highlight / accent */
  --color-accent-hover: #d99700;

  /* ---- Surfaces & text ---- */
  --color-background: #f6f8fa;       /* page background */
  --color-surface: #ffffff;          /* cards, panels, calendar cells */
  --color-surface-alt: #eef1f5;      /* subtle alternate surface */
  --color-border: #d7dee6;           /* hairlines, dividers */
  --color-text: #1c2733;             /* primary body text */
  --color-text-muted: #5b6b7b;       /* secondary/labels */
  --color-text-inverse: #ffffff;     /* text on primary/dark surfaces */

  /* ---- Links ---- */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);

  /* ---- Buttons (add-to-calendar button customizer maps to these) ---- */
  --color-button-bg: var(--color-primary);
  --color-button-bg-hover: var(--color-primary-hover);
  --color-button-text: var(--color-text-inverse);
  --button-radius: 8px;              /* shape/rounding */
  --button-padding-y: 0.6rem;
  --button-padding-x: 1.1rem;
  --button-font-weight: 600;

  /* ---- Calendar-specific ---- */
  --color-event: #1f6feb;            /* default event chip color */
  --color-event-text: #ffffff;
  --color-event-members: #6f42c1;    /* members-only event accent */
  --color-today-highlight: #fff4d6;  /* "today" cell highlight */
  --color-hover: #e6eefc;            /* generic hover background */
  --color-focus-ring: #1f6feb;       /* keyboard focus outline */

  /* ---- Status colors ---- */
  --color-success: #1a7f37;
  --color-warning: #9a6700;
  --color-danger: #cf222e;

  /* ---- Fonts (curated Google Fonts list, brief §4.10). System stack used
   *      as the safe fallback until a web font is wired up. ---- */
  --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Type scale ---- */
  --font-size-base: 16px;            /* adjustable base size */
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.25rem;
  --line-height-base: 1.55;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* ---- Spacing & layout (kept token-driven so themes can breathe) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.10);
  --max-content-width: 960px;
}