/* ==========================================================================
   Design Tokens — Pranav Global
   Extracted from Figma: Kovaion-Website-Design / Pranav Global Website
   ========================================================================== */

:root {

    /* -------------------------------------------------------------------------
       Brand Colors
       ------------------------------------------------------------------------- */

    --color-primary:         #ff5a3c;   /* Coral — CTAs, highlights, accents */
    --color-primary-hover:   #e64d30;   /* Darker coral for hover/active */
    --color-primary-light:   #ff85a3;   /* Pink — gradient partner */
    --color-peach:           #feb7a0;   /* Peach — gradient partner */

    --color-dark:            #1e252f;   /* Dark navy — footer bg, body text */
    --color-white:           #ffffff;   /* Pure white — cards, sections */
    --color-black:           #000000;

    /* Page / Section Backgrounds */
    --color-bg:              #fff5f0;   /* Warm off-white — page background */
    --color-bg-header:       #faf8f6;   /* Header pill background */
    --color-bg-footer:       #1e252f;   /* Footer */
    --color-bg-card:         #ffffff;   /* Card / box background */

    /* Text */
    --color-text:            #1e252f;   /* Primary body text */
    --color-text-muted:      #858585;   /* Secondary / muted text */
    --color-text-footer-dim: #9aa4b2;   /* Dimmed footer text */

    /* Labels / Category Tags */
    --color-label:           #ff5a3c;   /* Uppercase section labels */

    /* -------------------------------------------------------------------------
       Gradient Definitions
       ------------------------------------------------------------------------- */

    /* "What we offer" section warm gradient */
    --gradient-offer: linear-gradient(
        -19.12deg,
        rgb(254, 183, 160) 14.644%,
        rgba(254, 183, 160, 0) 60.059%
    ),
    linear-gradient(
        208.21deg,
        rgba(255, 133, 163, 0) 53.813%,
        rgb(255, 133, 163) 138.56%
    );

    /* "Why Pranav Global" CTA block */
    --gradient-cta-block: linear-gradient(
        104.37deg,
        #ff5a3c 65.597%,
        #ff85a3 118.95%
    );

    /* Active / highlighted service card */
    --gradient-card-active: linear-gradient(
        144.76deg,
        #ff5a3c 10.281%,
        #ff85a3 99.206%
    );

    /* Active service card with featured card bg */
    --gradient-featured-card: linear-gradient(
        136.31deg,
        #ffffff 40.863%,
        #ff85a3 193.68%
    );

    /* -------------------------------------------------------------------------
       Typography
       ------------------------------------------------------------------------- */

    --font-heading: 'Clash Display Variable', 'Clash Display', sans-serif;
    --font-body:    'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    --font-mono:    'DM Mono', monospace;

    /* Font Sizes */
    --font-size-hero:   4rem;        /*  64px — hero headline */
    --font-size-h1:     3rem;        /*  48px */
    --font-size-h2:     2.25rem;     /*  36px — section headings */
    --font-size-h3:     1.5rem;      /*  24px — card / sub-section headings */
    --font-size-h4:     1.25rem;     /*  20px */
    --font-size-base:   1rem;        /*  16px — body copy */
    --font-size-lg:     1.125rem;    /*  18px — lead text, CTA */
    --font-size-sm:     0.875rem;    /*  14px — labels, footer links */
    --font-size-xs:     0.75rem;     /*  12px — copyright, captions */
    --font-size-mono:   1rem;        /*  16px — numbered labels (DM Mono) */

    /* Font Weights */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Line Heights */
    --lh-hero:    1.156;   /* 74px / 64px */
    --lh-tight:   1.2;
    --lh-heading: 1.3;
    --lh-base:    1.6;
    --lh-body:    1.5;

    /* Letter Spacing */
    --ls-label: 0.08em;    /* uppercase section labels e.g. CONTACT US */
    --ls-body:  0.004em;   /* subtle body tracking */
    --ls-xs:    0.05em;    /* copyright / small text */

    /* -------------------------------------------------------------------------
       Layout
       ------------------------------------------------------------------------- */

    --container-max:        1440px;
    --container-inner:      1280px;
    --container-padding:    80px;
    --container-padding-sm: 20px;

    /* -------------------------------------------------------------------------
       Spacing Scale (matches Figma numeric spacing)
       ------------------------------------------------------------------------- */

    --space-4:   0.25rem;    /*  4px */
    --space-8:   0.5rem;     /*  8px */
    --space-10:  0.625rem;   /* 10px */
    --space-12:  0.75rem;    /* 12px */
    --space-15:  0.9375rem;  /* 15px */
    --space-16:  1rem;       /* 16px */
    --space-20:  1.25rem;    /* 20px */
    --space-22:  1.375rem;   /* 22px */
    --space-24:  1.5rem;     /* 24px */
    --space-26:  1.625rem;   /* 26px */
    --space-27:  1.6875rem;  /* 27px */
    --space-28:  1.75rem;    /* 28px */
    --space-30:  1.875rem;   /* 30px */
    --space-32:  2rem;       /* 32px */
    --space-36:  2.25rem;    /* 36px */
    --space-40:  2.5rem;     /* 40px */
    --space-44:  2.75rem;    /* 44px */
    --space-48:  3rem;       /* 48px */
    --space-52:  3.25rem;    /* 52px */
    --space-60:  3.75rem;    /* 60px */
    --space-64:  4rem;       /* 64px */
    --space-80:  5rem;       /* 80px */
    --space-84:  5.25rem;    /* 84px */
    --space-96:  6rem;       /* 96px */
    --space-120: 7.5rem;     /* 120px */

    /* -------------------------------------------------------------------------
       Border Radius
       ------------------------------------------------------------------------- */

    --radius-4:    4px;
    --radius-10:   10px;    /* image corners */
    --radius-15:   15px;    /* header pill */
    --radius-25:   25px;    /* cards, section blocks */
    --radius-42:   42px;    /* CTA pill button */
    --radius-full: 9999px;  /* circular elements */

    /* -------------------------------------------------------------------------
       Shadows
       ------------------------------------------------------------------------- */

    --shadow-card:   0px 4px 8px 0px rgba(0, 0, 0, 0.12);
    --shadow-header: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-overlay: 0 8px 40px rgba(0, 0, 0, 0.18);

    /* -------------------------------------------------------------------------
       Transitions
       ------------------------------------------------------------------------- */

    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* -------------------------------------------------------------------------
       Z-Index Scale
       ------------------------------------------------------------------------- */

    --z-base:    1;
    --z-above:   10;
    --z-header:  100;
    --z-overlay: 200;
    --z-modal:   300;

    /* -------------------------------------------------------------------------
       Legacy aliases (keep for any existing code referencing old token names)
       ------------------------------------------------------------------------- */

    --color-accent:      var(--color-primary);
    --color-secondary:   var(--color-dark);
    --color-bg-alt:      var(--color-bg);
    --color-border:      rgba(30, 37, 47, 0.12);
    --gutter:            var(--container-padding);
    --gutter-sm:         var(--container-padding-sm);
    --font-size-2xl:     var(--font-size-h1);
    --font-size-3xl:     var(--font-size-hero);
    --font-size-xl:      var(--font-size-h3);
    --line-height-base:  var(--lh-base);
    --line-height-tight: var(--lh-tight);
    --radius-sm:         var(--radius-4);
    --radius-md:         var(--radius-15);
    --radius-lg:         var(--radius-25);
}