/* ============================================================
   REPARIO MARKETING PRO — Design Tokens (Canonical)
   ============================================================
   Source of truth for all Stitch exports.
   Generated: 2026-03-03
   Based on: AUDIT_EXISTING_STITCH_MARKETING_PRO_2026-03-03.md

   Usage:
   - All new Stitch exports MUST reference these tokens.
   - When integrating into WordPress theme, import this file
     BEFORE any component CSS.
   - Tailwind config must mirror these values exactly.
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary:        #5c5cff;
  --color-primary-hover:  #4b4be0;
  --color-primary-rgb:    92 92 255;       /* space-separated for Tailwind <alpha-value> */

  /* ── Semantic Colors ── */
  --color-success:        #10b748;
  --color-success-rgb:    16 183 72;
  --color-danger:         #ef4444;
  --color-danger-rgb:     239 68 68;
  --color-warning:        #f59e0b;
  --color-warning-rgb:    245 158 11;
  --color-info:           #3b82f6;
  --color-info-rgb:       59 130 246;

  /* ── Backgrounds ── */
  --color-bg-dark:        #0f0f23;
  --color-bg-dark-rgb:    15 15 35;
  --color-bg-light:       #f5f5f8;
  --color-bg-light-rgb:   245 245 248;

  /* ── Surfaces (dark mode layers, lightest to darkest) ── */
  --color-surface-1:      #18182f;         /* cards, panels */
  --color-surface-2:      #21213a;         /* elevated cards */
  --color-surface-3:      #111c2c;         /* tables, inputs */

  /* ── Borders ── */
  --color-border:         #2d2d48;

  /* ── Text ── */
  --color-text-muted:     #9d9db9;

  /* ── Border Radius ── */
  --radius-sm:            4px;             /* 0.25rem — small inputs */
  --radius-base:          12px;            /* 0.75rem — default cards */
  --radius-lg:            16px;            /* 1rem — large cards */
  --radius-xl:            24px;            /* 1.5rem — hero sections */
  --radius-full:          9999px;          /* pills, avatars */

  /* ── Typography ── */
  --font-display:         "Manrope", sans-serif;

  /* ── Spacing (reference scale) ── */
  --spacing-xs:           4px;
  --spacing-sm:           8px;
  --spacing-md:           16px;
  --spacing-lg:           24px;
  --spacing-xl:           32px;
  --spacing-2xl:          48px;

  /* ── Shadows ── */
  --shadow-glow-success:  0 0 20px -5px rgb(var(--color-success-rgb) / 0.15);
  --shadow-glow-primary:  0 0 20px -5px rgb(var(--color-primary-rgb) / 0.15);
  --shadow-elevated:      0 25px 50px -12px rgba(0, 0, 0, 0.5);

  /* ── Scrollbar (dark mode) ── */
  --scrollbar-track:      var(--color-bg-dark);
  --scrollbar-thumb:      var(--color-border);
  --scrollbar-width:      6px;

  /* ── Grid Pattern (Hero background) ── */
  --grid-dot-size:        32px;
  --grid-dot-opacity:     0.05;
}

/* ── Tailwind Config Mirror ──
   When using Tailwind CDN, use this config in functions.php:

   Colors with opacity support use: rgb(var(--rgb) / <alpha-value>)
   This enables bg-primary/10, shadow-primary/20, etc.
   --rgb vars MUST be space-separated (e.g. "92 92 255").

   tailwind.config = {
     darkMode: "class",
     theme: {
       extend: {
         colors: {
           "primary":          "rgb(var(--color-primary-rgb) / <alpha-value>)",
           "primary-hover":    "var(--color-primary-hover)",
           "background-light": "rgb(var(--color-bg-light-rgb) / <alpha-value>)",
           "background-dark":  "rgb(var(--color-bg-dark-rgb) / <alpha-value>)",
           "surface-dark":     "var(--color-surface-1)",
           "surface-card":     "var(--color-surface-2)",
           "border-dark":      "var(--color-border)",
           "text-muted":       "var(--color-text-muted)",
           "success":          "rgb(var(--color-success-rgb) / <alpha-value>)",
         },
         fontFamily: {
           "display": ["Manrope", "sans-serif"],
         },
         borderRadius: {
           "DEFAULT": "var(--radius-base)",
           "lg":      "var(--radius-lg)",
           "xl":      "var(--radius-xl)",
           "full":    "9999px",
         },
       },
     },
   }
── */