/* ===========================================================================
   ZayGis Design Tokens — the single source of brand truth.
   Styled to match the reference design language (deep plum + coral + mint,
   Source Sans 3 body, Source Code Pro labels). Used by both the public
   marketing site and the authenticated SPA so the two zones feel like one brand.
   =========================================================================== */

:root {
  /* Brand colors */
  --zg-color-primary: #4f105e;        /* purple (buttons, links) */
  --zg-color-primary-600: #3c0c48;
  --zg-color-primary-700: #2e0f3a;    /* dark plum (headings, dark bands) */
  --zg-color-primary-50: #f4ecf7;

  --zg-color-accent: #ff6e6e;         /* coral (accents, CTAs) */
  --zg-color-accent-600: #ff5c5c;
  --zg-color-accent-700: #f45059;
  --zg-color-accent-50: #ffe4d9;      /* soft peach */
  --zg-color-accent-100: #ff9283;

  --zg-color-danger: #e0455a;
  --zg-color-danger-50: #fbeaea;

  --zg-color-warning: #d9961f;
  --zg-color-success: #1f9d63;

  /* Neutrals */
  --zg-color-bg: #ffffff;
  --zg-color-bg-alt: #eaf6f0;         /* soft mint */
  --zg-color-surface: #ffffff;
  --zg-color-border: #ebdfef;
  --zg-color-text: #2e0f3a;           /* dark plum text */
  --zg-color-text-muted: #5e6370;
  --zg-color-text-inverse: #ffffff;
}

[data-theme="dark"] {
  --zg-color-bg: #150a1d;
  --zg-color-bg-alt: #1d1126;
  --zg-color-surface: #241631;
  --zg-color-border: #3a2745;
  --zg-color-text: #f3eef7;
  --zg-color-text-muted: #b3a7c0;
  --zg-color-primary-50: #2a1b35;
  --zg-color-accent-50: #3a2530;
  --zg-color-accent: #ff8a8a;
}

/* Typography */
:root {
  --zg-font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --zg-font-mono: "Source Code Pro", "SFMono-Regular", Menlo, Consolas, monospace;

  --zg-text-xs: 0.75rem;
  --zg-text-sm: 0.875rem;
  --zg-text-base: 1rem;
  --zg-text-lg: 1.125rem;
  --zg-text-xl: 1.375rem;
  --zg-text-2xl: 1.75rem;
  --zg-text-3xl: 2.25rem;
  --zg-text-4xl: 3rem;
  --zg-text-hero: clamp(2.25rem, 5vw, 3.5rem);

  --zg-radius-sm: 8px;
  --zg-radius-md: 12px;
  --zg-radius-lg: 20px;
  --zg-radius-pill: 999px;

  --zg-space-1: 0.25rem;
  --zg-space-2: 0.5rem;
  --zg-space-3: 0.75rem;
  --zg-space-4: 1rem;
  --zg-space-6: 1.5rem;
  --zg-space-8: 2rem;
  --zg-space-12: 3rem;
  --zg-space-16: 4rem;

  --zg-shadow-sm: 0 1px 3px rgba(46, 15, 58, 0.08);
  --zg-shadow-md: 0 12px 30px rgba(46, 15, 58, 0.1);
  --zg-shadow-lg: 0 24px 55px rgba(46, 15, 58, 0.18);

  --zg-container: 1180px;
}