/* ==========================================================================
   drdeepakshah.com — Design System Tokens (Netlify-inspired)
   Palette & typography aligned with Netlify Spark / marketing styles
   ========================================================================== */

:root {
    /* Netlify neutral dark scale */
    --bg-dark: #060b10;
    --bg-card: #12181f;
    --bg-elevated: #1e242c;
    --bg-header: rgba(6, 11, 16, 0.94);

    /* Netlify teal accent */
    --accent: #14d8d4;
    --accent-hover: #32e6e2;
    --accent-deep: #04a29f;

    /* Netlify blue (CTA text, depth) */
    --accent-blue: #2036a1;
    --accent-blue-deep: #1b205b;

    /* Text */
    --text-main: #ffffff;
    --text-muted: #abb5bf;
    --text-subtle: #7e8792;

    /* WhatsApp / success — Netlify green */
    --accent-green: #3ac364;
    --accent-green-hover: #31a855;

    /* Brand lockup — Netlify gold warmth */
    --brand-warm: #facd6f;
    --brand-warm-glow: rgba(250, 205, 111, 0.14);
    --brand-warm-border: rgba(250, 205, 111, 0.38);
    --brand-warm-surface: rgba(250, 205, 111, 0.1);

    /* About global image panel — sampled from global.png background */
    --about-global-bg: #f4c868;
    --about-global-slogan: #1e4a94;

    /* Typography — Mulish (body) + Pacaembu (headings) */
    --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    --font-primary: 'Mulish', var(--font-system);
    --font-heading: 'Pacaembu', 'Mulish', var(--font-system);

    /* Surfaces & borders */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.13);
    --border-accent: rgba(20, 216, 212, 0.28);
    --accent-glow: rgba(20, 216, 212, 0.14);
    --nav-active-bg: rgba(20, 216, 212, 0.08);
    --metric-box-bg: linear-gradient(
        165deg,
        rgba(20, 216, 212, 0.11) 0%,
        #1a232e 42%,
        #151c25 100%
    );
    --metric-box-bg-hover: linear-gradient(
        165deg,
        rgba(20, 216, 212, 0.16) 0%,
        #1e2834 42%,
        #171f29 100%
    );
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.5);

    /* Buttons — Netlify primary pattern */
    --btn-primary-bg: #32e6e2;
    --btn-primary-text: #2036a1;
    --btn-primary-hover-bg: #ffffff;

    /* Typography scale */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --text-sm: clamp(0.875rem, 0.82rem + 0.3vw, 0.9375rem);
    --text-base: clamp(1rem, 0.95rem + 0.35vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
    --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
    --text-hero: clamp(2.5rem, 2rem + 3vw, 4.25rem);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.25rem;
    --space-xl: 1.5rem;
    --space-2xl: 2.25rem;
    --space-3xl: 2.75rem;
    --space-4xl: 4rem;

    /* Layout — Netlify border-radius scale */
    --container-max: 1200px;
    --container-narrow: 720px;
    --header-height: 80px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 360px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
}