/* ============================================================
   00-variables.css
   Smart Synergy — Brand tokens, spacing, radii, shadows, motion.
   All other CSS files MUST use these custom properties.
   Mirrors src/app/globals.css (Next.js preview).
   ============================================================ */

:root {
        /* ---- Brand palette (from MASTER V1 §4.3) ---- */
        --ss-offwhite:   #F7F5F2;
        --ss-black:      #0C0C0C;
        --ss-gray:       #6F6F6F;
        --ss-violet:     #B8A5E6;
        --ss-turquoise:  #A7E3E7;
        --ss-lime:       #E5F792;
        --ss-gray-light: #ECEAE7;
        --ss-white:      #FFFFFF;

        /* Derived */
        --ss-ink:        #0C0C0C;
        --ss-ink-soft:   #2a2a2a;
        --ss-line:       #E2DFD9;
        --ss-border:     #E2DFDA;
        --ss-overlay:    rgba(12, 12, 12, 0.55);

        /* CTA variant backgrounds */
        --ss-variant-a-bg: var(--ss-violet);
        --ss-variant-a-fg: var(--ss-black);
        --ss-variant-b-bg: var(--ss-turquoise);
        --ss-variant-b-fg: var(--ss-black);
        --ss-variant-c-bg: var(--ss-lime);
        --ss-variant-c-fg: var(--ss-black);

        /* ---- Typography ---- */
        --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
        --font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

        /* Backwards-compat aliases used by older CSS */
        --ss-font-sans:    var(--font-sans);
        --ss-font-display: var(--font-display);
        --ss-font-mono:    var(--font-mono);

        /* Fluid type scale */
        --ss-fs-xs:   0.75rem;
        --ss-fs-sm:   0.875rem;
        --ss-fs-base: 1rem;
        --ss-fs-md:   1.125rem;
        --ss-fs-lg:   1.375rem;
        --ss-fs-xl:   1.75rem;
        --ss-fs-2xl:  2.25rem;
        --ss-fs-3xl:  3rem;
        --ss-fs-4xl:  clamp(2.5rem, 5vw + 1rem, 4.5rem);

        --ss-lh-tight: 1.1;
        --ss-lh-snug: 1.25;
        --ss-lh-base: 1.6;
        --ss-lh-loose: 1.75;

        --ss-tracking-tight: -0.02em;
        --ss-tracking-wide: 0.04em;
        --ss-tracking-wider: 0.12em;

        /* ---- Spacing scale (4px base) ---- */
        --ss-space-1: 0.25rem;
        --ss-space-2: 0.5rem;
        --ss-space-3: 0.75rem;
        --ss-space-4: 1rem;
        --ss-space-5: 1.5rem;
        --ss-space-6: 2rem;
        --ss-space-7: 3rem;
        --ss-space-8: 4rem;
        --ss-space-9: 6rem;
        --ss-space-10: 8rem;

        /* ---- Layout ---- */
        --ss-container: 1140px;
        --ss-wide: 1360px;
        --ss-gutter: clamp(1rem, 3vw, 2rem);
        --ss-section-y: clamp(3.5rem, 7vw, 7rem);

        /* ---- Radii ---- */
        --ss-radius-sm: 0.5rem;
        --ss-radius-md: 0.75rem;
        --ss-radius-lg: 1rem;
        --ss-radius-xl: 1.5rem;
        --ss-radius-2xl: 2rem;
        --ss-radius-pill: 999px;
        --radius: 0.75rem;
        --radius-sm: calc(var(--radius) - 4px);
        --radius-md: calc(var(--radius) - 2px);
        --radius-lg: var(--radius);
        --radius-xl: calc(var(--radius) + 4px);

        /* ---- Shadows (soft, premium) ---- */
        --ss-shadow-xs: 0 1px 2px rgba(12, 12, 12, 0.04);
        --ss-shadow-sm: 0 2px 6px rgba(12, 12, 12, 0.06);
        --ss-shadow-md: 0 8px 24px rgba(12, 12, 12, 0.08);
        --ss-shadow-lg: 0 18px 50px rgba(12, 12, 12, 0.12);
        --ss-shadow-glow-violet: 0 10px 40px rgba(184, 165, 230, 0.35);
        --ss-shadow-glow-turquoise: 0 10px 40px rgba(167, 227, 231, 0.35);
        --ss-shadow-glow-lime: 0 10px 40px rgba(229, 247, 146, 0.35);

        /* ---- Motion ---- */
        --ss-ease: cubic-bezier(0.22, 1, 0.36, 1);
        --ss-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
        --ss-dur-fast: 140ms;
        --ss-dur: 240ms;
        --ss-dur-slow: 480ms;

        /* ---- z-index scale ---- */
        --ss-z-base: 1;
        --ss-z-header: 100;
        --ss-z-dropdown: 200;
        --ss-z-mobile-menu: 300;
        --ss-z-overlay: 400;
        --ss-z-toast: 500;

        /* ---- Focus ring ---- */
        --ss-focus: 0 0 0 3px rgba(184, 165, 230, 0.55);
        --ss-focus-dark: 0 0 0 3px rgba(12, 12, 12, 0.85);

        /* ---- Card surface ---- */
        --card: #FFFFFF;
        --card-foreground: var(--ss-black);
        --background: var(--ss-offwhite);
        --foreground: var(--ss-black);
}

/* CTA variant surfaces — concrete rules in 05-components.css */
.ss-cta--variant-a { --ss-cta-bg: var(--ss-variant-a-bg); --ss-cta-fg: var(--ss-variant-a-fg); }
.ss-cta--variant-b { --ss-cta-bg: var(--ss-variant-b-bg); --ss-cta-fg: var(--ss-variant-b-fg); }
.ss-cta--variant-c { --ss-cta-bg: var(--ss-variant-c-bg); --ss-cta-fg: var(--ss-variant-c-fg); }