/* WebForge Pro — design-kit.css (auto-generated) */
/* theme: creative_agency */
:root {
  /* Brand colors */
  --wf-color-primary: #a855f7;
  --wf-color-secondary: #ec4899;
  --wf-color-accent: #f59e0b;
  /* On-colors (readable text on brand surfaces) */
  --wf-on-primary: #0f172a;
  --wf-on-secondary: #0f172a;
  --wf-on-accent: #0f172a;
  /* Primary scale */
  --wf-color-primary-50: #f8f1fe;
  --wf-color-primary-100: #f1e4fe;
  --wf-color-primary-200: #e3c9fc;
  --wf-color-primary-300: #d2a7fb;
  --wf-color-primary-400: #bd7ef9;
  --wf-color-primary-500: #a855f7;
  --wf-color-primary-600: #8d47cf;
  --wf-color-primary-700: #723aa8;
  --wf-color-primary-800: #572c80;
  --wf-color-primary-900: #3c1f59;
  /* Secondary scale */
  --wf-color-secondary-50: #fdf0f7;
  --wf-color-secondary-100: #fce2ef;
  --wf-color-secondary-200: #f9c4de;
  --wf-color-secondary-300: #f5a0ca;
  --wf-color-secondary-400: #f174b1;
  --wf-color-secondary-500: #ec4899;
  --wf-color-secondary-600: #c63c81;
  --wf-color-secondary-700: #a03168;
  --wf-color-secondary-800: #7b2550;
  --wf-color-secondary-900: #551a37;
  /* Accent scale */
  --wf-color-accent-50: #fef7eb;
  --wf-color-accent-100: #fdefd8;
  --wf-color-accent-200: #fce0b1;
  --wf-color-accent-300: #facd80;
  --wf-color-accent-400: #f7b546;
  --wf-color-accent-500: #f59e0b;
  --wf-color-accent-600: #ce8509;
  --wf-color-accent-700: #a76b07;
  --wf-color-accent-800: #7f5206;
  --wf-color-accent-900: #583904;
  /* Typography */
  --wf-font-en: "Inter", system-ui, -apple-system, sans-serif;
  --wf-font-he: "Heebo", system-ui, sans-serif;
  --wf-text-xs: 0.64rem;
  --wf-text-sm: 0.8rem;
  --wf-text-base: 1.0rem;
  --wf-text-lg: 1.25rem;
  --wf-text-xl: 1.5625rem;
  --wf-text-2xl: 1.9531rem;
  --wf-text-3xl: 2.4414rem;
  --wf-text-4xl: 3.0518rem;
  --wf-text-5xl: 3.8147rem;
  /* Spacing */
  --wf-space-1: 0.25rem;
  --wf-space-2: 0.5rem;
  --wf-space-3: 0.75rem;
  --wf-space-4: 1rem;
  --wf-space-5: 1.5rem;
  --wf-space-6: 2rem;
  --wf-space-8: 3rem;
  /* Surface */
  --wf-radius: 12px;
  --wf-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  --wf-border: 1px solid var(--wf-color-primary-200);
  /* Surface tokens (dark mode) */
  --wf-bg: #0b0b12;
  --wf-surface: #16161f;
  --wf-surface-alt: #101019;
  --wf-text: #f5f6fa;
  --wf-text-muted: #a1a1b3;
  --wf-border: #262633;
  --wf-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --wf-card-shadow-hover: 0 26px 56px rgba(0, 0, 0, 0.6);
  --wf-hero: linear-gradient(135deg, #0b0b12 0%, #3b1d6e 55%, var(--wf-color-primary) 100%);
}

/* RTL-safe logical utilities (mirror automatically via dir) */
.wf-text-start { text-align: start; }
.wf-text-end { text-align: end; }
.wf-pad-inline { padding-inline: var(--wf-space-4); }
.wf-margin-inline { margin-inline: var(--wf-space-4); }
.wf-ms-auto { margin-inline-start: auto; }
.wf-me-auto { margin-inline-end: auto; }
.wf-border-start { border-inline-start: var(--wf-border); }