/* ============================================================
   GenesisWeb Design Tokens
   ------------------------------------------------------------
   Single source of truth for the design system. All colors,
   spacing, radii, shadows, motion, and z-index live here.

   Color tokens distinguish DECORATIVE brand colors (gradients,
   backgrounds, large shapes) from TEXT/UI colors that must
   pass WCAG 2.1 AA contrast on light backgrounds.
   ============================================================ */

:root {
    /* --- Background --- */
    --bg-primary: #F8FEFD;
    --bg-secondary: #E9FBF9;
    --bg-card: rgba(233, 251, 249, 0.5);
    --bg-glass: rgba(255, 255, 255, 0.4);

    /* --- Text --- */
    --text-primary: #1F2D3D;
    --text-secondary: #475669;

    /* --- Brand: decorative (gradients, backgrounds, large shapes) --- */
    --accent-teal: #00C2B8;
    --accent-blue: #1DAEFF;

    /* --- Brand: text/UI (WCAG AA on light backgrounds) --- */
    --accent-teal-text: #007A78;
    --accent-blue-text: #0E6FBF;

    /* --- Gradients --- */
    --gradient-main: linear-gradient(135deg, #00C2B8, #1DAEFF); /* decorative use */
    --gradient-cta: linear-gradient(135deg, #006B66, #0066B2);  /* white text passes AA */
    --gradient-alt: linear-gradient(135deg, #1DAEFF, #00C2B8);

    /* --- Glass --- */
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px rgba(0, 194, 184, 0.1);
    --glow-teal: 0 0 30px rgba(0, 194, 184, 0.2);
    --glow-blue: 0 0 30px rgba(29, 174, 255, 0.2);

    /* --- Semantic colors --- */
    --color-success: #15803D;
    --color-success-dot: #22C55E;
    --color-danger: #B91C1C;
    --accent-purple: #6B21A8;
    --accent-purple-bg: rgba(107, 33, 168, 0.08);

    /* --- Form --- */
    --form-border: rgba(31, 45, 61, 0.45);
    --form-border-focus: var(--accent-teal-text);

    /* --- Spacing scale --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* --- Radii --- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 100px;

    /* --- Shadows --- */
    --shadow-sm: 0 2px 8px rgba(0, 100, 150, 0.04);
    --shadow-md: 0 8px 32px rgba(0, 194, 184, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 194, 184, 0.15);
    --shadow-cta: 0 4px 20px rgba(14, 111, 191, 0.35);
    --shadow-cta-hover: 0 8px 30px rgba(14, 111, 191, 0.45);

    /* --- Motion --- */
    --dur-fast: 150ms;
    --dur-base: 300ms;
    --dur-slow: 700ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* --- Z-index --- */
    --z-bg: 0;
    --z-particles: 1;
    --z-content: 2;
    --z-modal: 999;
    --z-nav: 1000;
    --z-skip: 10000;
}