/* Famyro Area Guide — Design tokens v1.0 */
:root {
  /* Brand */
  --famyro-color-ink: #082c20;
  --famyro-color-ink-strong: #031b12;
  --famyro-color-green: #00e884;
  --famyro-color-green-dark: #00aa64;
  --famyro-color-green-deep: #007d4c;
  --famyro-color-cream: #f8f5e9;
  --famyro-color-surface: #ffffff;
  --famyro-color-surface-soft: #fffaf0;
  --famyro-color-yellow: #ffd84d;
  --famyro-color-mint: #c0ffd2;
  --famyro-color-blue: #b8e7f2;
  --famyro-color-pink: #f4c3d2;
  --famyro-color-orange: #f4ad6a;
  --famyro-color-muted: #527066;
  --famyro-color-border-soft: rgba(8, 44, 32, 0.14);

  /* Semantic */
  --famyro-color-success: var(--famyro-color-green-dark);
  --famyro-color-warning: #b56f00;
  --famyro-color-danger: #b83f43;
  --famyro-color-info: #286e91;

  /* Typography */
  --famyro-font-heading: "FamyroPoppins", Poppins, "Arial Black", Arial, sans-serif;
  --famyro-font-body: Arial, Helvetica, sans-serif;
  --famyro-font-size-xs: 0.75rem;
  --famyro-font-size-sm: 0.875rem;
  --famyro-font-size-base: 1rem;
  --famyro-font-size-md: 1.125rem;
  --famyro-font-size-lg: 1.375rem;
  --famyro-font-size-xl: 1.75rem;
  --famyro-font-size-2xl: 2.25rem;
  --famyro-font-size-3xl: 3rem;
  --famyro-font-size-4xl: 4rem;

  /* Spacing */
  --famyro-space-1: 0.25rem;
  --famyro-space-2: 0.5rem;
  --famyro-space-3: 0.75rem;
  --famyro-space-4: 1rem;
  --famyro-space-5: 1.5rem;
  --famyro-space-6: 2rem;
  --famyro-space-7: 3rem;
  --famyro-space-8: 4rem;
  --famyro-space-9: 6rem;

  /* Borders and radii */
  --famyro-border-width: 2px;
  --famyro-border-width-strong: 3px;
  --famyro-radius-sm: 10px;
  --famyro-radius-md: 16px;
  --famyro-radius-lg: 24px;
  --famyro-radius-xl: 32px;
  --famyro-radius-pill: 999px;

  /* Solid shadows */
  --famyro-shadow-sm: 3px 3px 0 var(--famyro-color-ink-strong);
  --famyro-shadow-md: 5px 5px 0 var(--famyro-color-ink-strong);
  --famyro-shadow-lg: 8px 8px 0 var(--famyro-color-ink-strong);
  --famyro-shadow-soft: 0 9px 28px rgba(8, 44, 32, 0.11);

  /* Layout */
  --famyro-container-narrow: 760px;
  --famyro-container-medium: 1040px;
  --famyro-container-wide: 1180px;
  --famyro-container-max: 1400px;
  --famyro-page-gutter: 24px;

  /* Motion */
  --famyro-transition-fast: 160ms ease;
  --famyro-transition-base: 240ms ease;
  --famyro-transition-slow: 400ms ease;

  /* Layering */
  --famyro-z-dropdown: 40;
  --famyro-z-sticky: 50;
  --famyro-z-modal: 100;
}

@media (max-width: 639px) {
  :root {
    --famyro-page-gutter: 20px;
  }
}