:root {
  /* GFE core palette */
  --gfe-navy: #14213d;
  --gfe-navy-hover: #1e3a6e;
  --gfe-bg: #ffffff;
  --gfe-bg-secondary: #f2f8fd;
  --gfe-bg-dark: #1a1a1a;
  --gfe-text: #111111;
  --gfe-text-muted: #6b7280;
  --gfe-divider: #e2e8f0;
  --gfe-border-control: #828997;
  --gfe-whatsapp: #25d366;
  --gfe-whatsapp-dark: #075e54;
  --gfe-whatsapp-dark-hover: #054c44;
  --gfe-success: #0c6e4c;
  --gfe-success-bg: #e6f4ea;
  --gfe-alert: #a63d40;
  --gfe-alert-bg: #fae8e8;
  --gfe-alert-border: #f1aeb0;
  --gfe-experimental: #1d4e89;
  --gfe-experimental-hover: #17406f;

  /* Shared type, space, radius, depth, and motion */
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-12: 0.75rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-24: 1.5rem;
  --text-32: 2rem;
  --text-48: 3rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --radius-control: 0.25rem;
  --radius-card: 0.5rem;
  --radius-modal: 0.75rem;
  --radius-pill: 999rem;
  --shadow-sm: 0 1px 3px rgb(20 33 61 / 8%);
  --shadow-md: 0 4px 12px rgb(20 33 61 / 12%);
  --shadow-lg: 0 8px 24px rgb(20 33 61 / 16%);
  --transition-fast: 160ms;
  --transition-standard: 240ms;
  --focus-ring: 0 0 0 0.25rem rgb(29 78 137 / 28%);

  /* Public-board theme surface. A tenant may later provide a server-side default;
     until then the CSS respects the device preference and theme.js stores an
     explicit visitor choice in this same token model. */
  --theme-page: var(--gfe-bg-secondary);
  --theme-surface: var(--gfe-bg);
  --theme-surface-subtle: var(--gfe-bg-secondary);
  --theme-surface-strong: var(--gfe-navy);
  --theme-text: var(--gfe-text);
  --theme-text-muted: var(--gfe-text-muted);
  --theme-text-on-strong: var(--gfe-bg);
  --theme-action-bg: var(--gfe-navy);
  --theme-action-hover: var(--gfe-navy-hover);
  --theme-action-text: var(--gfe-bg);
  --theme-border: var(--gfe-divider);
  --theme-control-border: var(--gfe-border-control);
  --theme-shadow: var(--shadow-sm);
  --theme-overlay: rgb(17 17 17 / 72%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --theme-page: var(--gfe-bg-dark);
    --theme-surface: var(--gfe-navy);
    --theme-surface-subtle: var(--gfe-bg-dark);
    --theme-surface-strong: var(--gfe-navy-hover);
    --theme-text: var(--gfe-bg);
    --theme-text-muted: var(--gfe-bg-secondary);
    --theme-text-on-strong: var(--gfe-bg);
    --theme-action-bg: var(--gfe-bg);
    --theme-action-hover: var(--gfe-bg-secondary);
    --theme-action-text: var(--gfe-navy);
    --theme-border: var(--gfe-navy-hover);
    --theme-control-border: var(--gfe-border-control);
    --theme-shadow: none;
    --theme-overlay: rgb(17 17 17 / 84%);
    color-scheme: dark;
  }
}

:root[data-theme='light'] {
  --theme-page: var(--gfe-bg-secondary);
  --theme-surface: var(--gfe-bg);
  --theme-surface-subtle: var(--gfe-bg-secondary);
  --theme-surface-strong: var(--gfe-navy);
  --theme-text: var(--gfe-text);
  --theme-text-muted: var(--gfe-text-muted);
  --theme-text-on-strong: var(--gfe-bg);
  --theme-action-bg: var(--gfe-navy);
  --theme-action-hover: var(--gfe-navy-hover);
  --theme-action-text: var(--gfe-bg);
  --theme-border: var(--gfe-divider);
  --theme-control-border: var(--gfe-border-control);
  --theme-shadow: var(--shadow-sm);
  --theme-overlay: rgb(17 17 17 / 72%);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --theme-page: var(--gfe-bg-dark);
  --theme-surface: var(--gfe-navy);
  --theme-surface-subtle: var(--gfe-bg-dark);
  --theme-surface-strong: var(--gfe-navy-hover);
  --theme-text: var(--gfe-bg);
  --theme-text-muted: var(--gfe-bg-secondary);
  --theme-text-on-strong: var(--gfe-bg);
  --theme-action-bg: var(--gfe-bg);
  --theme-action-hover: var(--gfe-bg-secondary);
  --theme-action-text: var(--gfe-navy);
  --theme-border: var(--gfe-navy-hover);
  --theme-control-border: var(--gfe-border-control);
  --theme-shadow: none;
  --theme-overlay: rgb(17 17 17 / 84%);
  color-scheme: dark;
}