/*
 * mgbee design tokens.
 *
 * Components consume these variables. Do not hard-code colors, type, or
 * spacing in component CSS. Theme modes override tokens on html[data-theme].
 *
 * Parent Madara still styles via body.text-ui-light / body.text-ui-dark.
 * These tokens are the child-theme contract. Empty dark overrides are
 * intentional until a theme implementation is specified.
 */

:root,
html[data-theme="light"] {
  --mgbee-color-primary: var(--primary-color, #eb3349);
  --mgbee-color-secondary: var(--secondary-color, #f45c43);
  --mgbee-color-accent: #f5c518;
  --mgbee-color-border-dark: var(--border-dark-color, #4d4d4d);
  --mgbee-color-border-light: var(--border-light-color, #e1e1e1);

  --mgbee-color-bg: #ffffff;
  --mgbee-color-bg-elevated: #ffffff;
  --mgbee-color-text: #333333;
  --mgbee-color-text-muted: #666666;
  --mgbee-color-border: var(--mgbee-color-border-light);
  --mgbee-color-focus: var(--mgbee-color-primary);

  --mgbee-font-family-base: "Poppins", sans-serif;
  --mgbee-font-size-base: 1rem;
  --mgbee-line-height-base: 1.5;
  --mgbee-font-size-reading: 1rem;

  --mgbee-space-1: 0.25rem;
  --mgbee-space-2: 0.5rem;
  --mgbee-space-3: 0.75rem;
  --mgbee-space-4: 1rem;
  --mgbee-space-5: 1.5rem;
  --mgbee-space-6: 2rem;
  --mgbee-space-8: 3rem;

  --mgbee-size-control: 2.5rem;
  --mgbee-radius: 4px;
  --mgbee-radius-lg: 16px;
  --mgbee-container: 1170px;

  --mgbee-bp-sm: 576px;
  --mgbee-bp-md: 768px;
  --mgbee-bp-lg: 992px;
  --mgbee-bp-xl: 1200px;
}

html[data-theme="dark"],
.mgbee-home {
  --mgbee-color-primary: #f5c518;
  --mgbee-color-accent: #f5c518;
  --mgbee-color-bg: #07070a;
  --mgbee-color-bg-elevated: #141418;
  --mgbee-color-text: #f4f4f5;
  --mgbee-color-text-muted: #9a9aa3;
  --mgbee-color-border: #2a2a30;
  --mgbee-color-focus: #f5c518;
}