/* =======================================================
 * Project Name   : eNoah
 * Module         : eNoah iSolution — Design Tokens 2026
 * Author         : Uthaiyakumar S | Token Extraction
 * Version        : 1.0
 * Date           : 01 April 2026
 * Copyright      : © 2026 eNoah iSolution India Pvt Ltd.
 * Confidentiality: Internal Use Only — Do Not Distribute
*  ======================================================= */

/* Inter: self-hosted via Google Fonts WOFF2 */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter/Inter-Regular.woff2) format("woff2")}@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/inter/Inter-Italic.woff2) format("woff2")}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter/Inter-Medium.woff2) format("woff2")}@font-face{font-family:'Inter';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/inter/Inter-MediumItalic.woff2) format("woff2")}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter/Inter-SemiBold.woff2) format("woff2")}@font-face{font-family:'Inter';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/inter/Inter-SemiBoldItalic.woff2) format("woff2")}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter/Inter-Bold.woff2) format("woff2")}@font-face{font-family:'Inter';font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/inter/Inter-BoldItalic.woff2) format("woff2")}@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/inter/Inter-ExtraBold.woff2) format("woff2")}@font-face{font-family:'Inter';font-style:italic;font-weight:800;font-display:swap;src:url(../fonts/inter/Inter-ExtraBoldItalic.woff2) format("woff2")}
/* Inter: self-hosted via Google Fonts WOFF2 end */

:root {

  /* =======================================================
   * 1. COLOR TOKENS
  *  ======================================================= */

  /* --- 1.1 Brand Primary (Orange) --- */
  --color-brand-primary:          #ff6d27;   /* CTA buttons, links, icons, active states */
  --color-brand-hover:            #f36f20;   /* Button hover */
  --color-brand-active:           #f95c11;   /* Button active / pressed */
  --color-brand-deep:             #f7580c;   /* Search submit hover */
  --color-brand-secondary:        #ffa627;   /* Secondary accent */
  --color-brand-secondary-alt:    #ff9c00;   /* Alt secondary accent */
  --color-brand-light:            #ff8c55;   /* Tint / soft orange */
  --color-brand-gold:             #ffd146;   /* Highlight text on dark bg (profile names) */
  --color-brand-white:            #ffffff;   /* Text on dark / branded bg */

  /* --- 1.2 Brand Dark (Navy) --- */
  --color-brand-navy:             #2e3d62;   /* Headings, CTA bg, nav text */
  --color-brand-navy-hover:       #0d6ccd;   /* Blue text hover */
  --color-brand-navy-deep:        #253d79;   /* Headings, CTA bg, nav text */
  --color-brand-navy-dark:        #001b41;   /* MDP Headings */
  --color-brand-navy-tint:        #edf2ff;   /* Navy background tint / info chip */
  --color-brand-navy-50:          #e7f3ff;   /* tick bg light */
  --color-brand-navy-100:         #d5dde3;   /* Key service Navy border tint */
  --color-brand-navy-200:         #e8f0f7;   /* Key service Navy background tint */
  --color-brand-navy-300:         #d7e6f3;   /* Key service Navy background tint */

  /* --- 1.3 Text & Neutral --- */
  --color-text-body:              #2b2f39;   /* Default body copy */
  --color-text-dark:              #212121;   /* High contrast / search input */
  --color-text-light:             #545454;   /* Secondary high text */
  --color-text-muted:             #666666;   /* Secondary text */
  --color-text-subtle:            #999999;   /* Meta / author timestamps */
  --color-text-placeholder:       #878787;   /* Designation / form placeholder */
  --color-text-black:             #000000;   /* Absolute black (rare) */
  --color-neutral-50:             #fafafa;
  --color-neutral-100:            #f8f8f8;
  --color-neutral-150:            #eff2f8;
  --color-neutral-200:            #e6e9ec;
  --color-neutral-300:            #f2f5f9;

  /* --- 1.4 Orange Background Scale --- */
  --color-bg-orange-50:           #fffaf6;   /* Page wash / lightest tint */
  --color-bg-orange-75:           #fff9f5;   /* Alt page wash */
  --color-bg-orange-100:          #fef5ee;   /* Section bg */
  --color-bg-orange-200:          #fff0e7;   /* Panel / card bg (csr, team) */
  --color-bg-orange-300:          #ffece0;   /* Hover bg */
  --color-bg-orange-400:          #fee7da;   /* Filter section / highlight bg */
  --color-bg-orange-500:          #fddfce;   /* Avatar frame / photo bg */
  --color-bg-orange-600:          #fbe6d4;   /* Icon badge bg (tick) */
  --color-bg-orange-700:          #f8e0c9;   /* Search panel bg */
  --color-bg-orange-800:          #fbf0e9;   /* Alt panel bg */
  --color-bg-orange-900:          #fde9dc;   /* Case filter section bg */
  --color-bg-orange-950:          #ffd6c1;   /* Experiance bg */

  /* --- 1.5 Surface & Semantic --- */
  --color-bg-surface:             rgba(246, 248, 251, 1);    /* Page / body bg */
  --color-bg-surface-light:       var(--color-bg-orange-400);  /* Page / body bg */
  --color-bg-danger:              rgba(249, 213, 217, 0.6);  /* Error / alert bg */
  --color-bg-success:             rgba(242, 246, 236, 0.6);  /* Success bg */
  --color-bg-info:                rgba(224, 243, 248, 0.6);  /* Info bg */

  /* --- 1.6 Border Scale --- */
  --color-border-orange-light:    #f3d3b7;   /* Tab / chip border */
  --color-border-orange-mid:      #fdc29f;   /* List divider (csr) */
  --color-border-orange-warm:     #fdb9a2;   /* Avatar / card border (team) */
  --color-border-orange-strong:   #f9ba9c;   /* Hover border */
  --color-border-search:          #fccfa5;   /* Search box border */
  --color-border-filter:          #f0c4aa;   /* Filter select border */
  --color-border-card:            #ede9e7;   /* Card border default */
  --color-border-neutral:         #e9e8e8;   /* Neutral divider */
  --color-border-default:         #dddddd;   /* Tabs / standard input */
  --color-border-strong:          #cccccc;   /* Modal close / strong divider */
  --color-border-input:           #aaaaaa;   /* Input border */
  --color-border-media:           #f3ede9;   /* Image / media frame */

  /* --- 1.7 Overlay (rgba) --- */
  --color-overlay-02:             rgba(0, 0, 0, 0.02);
  --color-overlay-05:             rgba(0, 0, 0, 0.05);
  --color-overlay-08:             rgba(0, 0, 0, 0.08);
  --color-overlay-10:             rgba(0, 0, 0, 0.10);
  --color-overlay-15:             rgba(0, 0, 0, 0.15);
  --color-overlay-20:             rgba(0, 0, 0, 0.20);
  --color-overlay-25:             rgba(0, 0, 0, 0.25);
  --color-overlay-30:             rgba(0, 0, 0, 0.30);
  --color-overlay-40:             rgba(0, 0, 0, 0.40);
  --color-overlay-50:             rgba(0, 0, 0, 0.50);
  --color-white-75:               rgba(255, 255, 255, 0.75); /* Glassmorphism / border */
  --color-white-80:               rgba(255, 255, 255, 0.80);
  --color-white-85:               rgba(255, 255, 255, 0.85);
  
  /* --- 1.8 - social brand colors --- */
  --color-social-facebook:        #3b5998;
  --color-social-linkedin:        #007bb6;
  --color-social-twitter:         #191919;
  --color-social-youtube:         #ed173a;
  --color-social-insta:           #dd3050;


  /* =======================================================
   * 2. TYPOGRAPHY TOKENS
  *  ======================================================= */

  /* --- 2.1 Font Family --- */
  --font-family-primary:          'Inter', sans-serif;

  /* --- 2.2 Font Size Scale --- */
  --text-h1:                      42px;   /* Page hero heading */
  --text-h2:                      38px;   /* Section heading */
  --text-h2-sm:                   32px;   /* Section heading (≤991px) */
  --text-h3:                      26px;   /* Sub-section heading */
  --text-h3-accent:               24px;   /* Profile name / accent h3 */
  --text-h3-card:                 21px;   /* Card heading */
  --text-md:                      18px;   /* Card sub-heading */
  --text-body:                    16px;   /* Default body */
  --text-body-sm:                 15px;   /* Card body */
  --text-body-xs:                 14px;   /* UI labels / meta */
  --text-caption:                 13px;   /* Compact label */
  --text-micro:                   12px;   /* Caption / thumbnail overlay */
  --text-tiny:                    10px;   /* Fine print */

  /* --- 2.3 Font Weight --- */
  --fw-regular:                   400;
  --fw-medium:                    500;
  --fw-semibold:                  600;
  --fw-bold:                      700;
  --fw-extrabold:                 800;

  /* --- 2.4 Line Height --- */
  --lh-heading:                   1.2;   /* Tight headings */
  --lh-tight:                     1.3;   /* Compact text */
  --lh-snug:                      1.4;   /* Slightly tight */
  --lh-body:                      1.5;   /* Standard body */
  --lh-relaxed:                   1.6;   /* Comfortable spacing */
  --lh-loose:                     1.8;   /* Loose text */
  --lh-xl:                        2;   /* Extra loose */  
  --lh-xs:                        1.0;   /* Captions, ~16px */
  --lh-sm:                        1.125;   /* Small text, ~18px */
  --lh-md:                        1.25;   /* Mid text, ~20px */
  --lh-sub:                       1.375;   /* Sub-body, ~22px */
  --lh-lgplus:                    1.75;   /* Extended body, ~28px */
  --lh-display:                   1.875;   /* Display headings, ~30px */
  --lh-xxl:                       2.125;   /* Extra large headings, ~34px */
  --lh-hero:                      2.625;   /* Hero headings, ~42px */  

  /* --- 2.5 Letter Spacing --- */
  --ls-heading:                   1px;    /* H1, H2 */
  --ls-accent:                    0.5px;  /* Profile name */
  --ls-md:                   	  0.3px;  /* Tools title */
  --ls-sm:                   	  0.25px; /* VC panel title */


  /* =======================================================
   * 3. SPACING TOKENS
  *  ======================================================= */

  --space-1:                      2px;
  --space-2:                      4px;
  --space-3:                      5px;
  --space-4:                      6px;
  --space-5:                      8px;
  --space-6:                      10px;
  --space-7:                      12px;
  --space-8:                      15px;
  --space-9:                      20px;
  --space-10:                     25px;
  --space-11:                     30px;
  --space-12:                     35px;
  --space-13:                     40px;
  --space-14:                     45px;
  --space-15:                     50px;
  --space-16:                     60px;


  /* =======================================================
   * 4. BORDER RADIUS TOKENS
  *  ======================================================= */

  --radius-none:                  0px;
  --radius-xs:                    2px;    /* Micro chip */
  --radius-sm-alt:                3px;    /* Icon badge corner */
  --radius-sm:                    4px;    /* No-results badge */
  --radius-md:                    6px;    /* Form inputs */
  --radius-lg:                    8px;    /* Search inner / dropdown */
  --radius-xl:                    12px;   /* Header box / avatar / profile card */
  --radius-2xl:                   16px;   /* Case cards / content cards */
  --radius-3xl:                   18px;   /* Tab panel bg / csr panel / team block */
  --radius-4xl:                   20px;   /* Large panel */
  --radius-tab:                   24px;   /* vc_tta tab buttons */
  --radius-pill-sm:               32px;   /* Small pill button */
  --radius-pill:                  40px;   /* CTA case_bottom pill */
  --radius-pill-lg:               42px;   /* Filter / search button */
  --radius-full:                  50px;   /* Full pill */
  --radius-circle:                50%;    /* Avatar / search btn / top-circle-icon */
  --radius-circle-alt:            100%;   /* Alternate circle token */


  /* =======================================================
   * 5. SHADOW TOKENS
  *  ======================================================= */

  --shadow-none:                  none;

  /* Elevation 1 — Subtle lift */
  --shadow-xs:                    0 1px 2px 0 var(--color-overlay-10);
  --shadow-xs-offset:             -2px 2px 2px 0 var(--color-overlay-08);
  --shadow-xs-float:              0 1px 3px var(--color-overlay-20);

  /* Elevation 2 — Component default */
  --shadow-sm:                    0 0 4px 0 var(--color-overlay-15);
  --shadow-sm-lift:               0 2px 4px 0 var(--color-overlay-15);

  /* Elevation 3 — Cards & panels */
  --shadow-md-soft:               0 0 6px 0 var(--color-overlay-05);
  --shadow-md:                    0 0 6px 0 var(--color-overlay-10);
  --shadow-md-strong:             0 0 6px 0 var(--color-overlay-20);
  --shadow-md-alt:                2px 0 4px 0 var(--color-overlay-10);
  --shadow-md-lift:               0 2px 6px 0 var(--color-overlay-20);
  --shadow-md-float:              0 2px 6px 0 var(--color-overlay-25);
  --shadow-md-wshop:              0 3px 9px 0 var(--color-overlay-30);
  --shadow-md-offset:             -3px 3px 3px 0 var(--color-overlay-10);

  /* Elevation 4 — Raised interactive */
  --shadow-lg-soft:               0 0 8px 0 var(--color-overlay-05);
  --shadow-lg:                    0 0 8px 0 var(--color-overlay-30);
  --shadow-lg-strong:             0 0 8px 0 var(--color-overlay-40);

  /* Elevation 5 — Overlays & hover states */
  --shadow-xl-soft:               0 0 12px 0 var(--color-overlay-05);
  --shadow-xl:                    0 0 12px 0 var(--color-overlay-15);

}


/* =======================================================
 * 6. NAMED KEYFRAME ANIMATIONS
*  ======================================================= */

/* Profile / case card overlay — slide up on hover */
@keyframes profile-slide-in {
  from { top: 65%; padding-top: 6px; }
  to   { top: -1px; padding-top: 40%; }
}

/* Profile / case card overlay — slide down on mouse-out */
@keyframes profile-slide-out {
  from { top: -1px; padding-top: 40%; }
  to   { top: 65%; padding-top: 6px; }
}

/* Blog card overlay — slide up on hover */
@keyframes blog-slideIn {
  from { top: 60%; padding-top: 15px; }
  to   { top: 0%;  padding-top: 25% }
}
/* Blog card overlay — slide down on mouse-out */
@keyframes blog-slideOut {
  from { top: 0%;  padding-top: 25% }
  to   { top: 60%; padding-top: 15px; }
}

@keyframes blog-sm-slideIn {
  from { top: 48%; padding-top: 15px; }
  to   { top: 0%;  padding-top: 25% }
}
@keyframes blog-sm-slideOut {
  from { top: 0%;  padding-top: 25% }
  to   { top: 48%; padding-top: 15px; }
}

/* Case study image overlay — slide in from bottom */
@keyframes enoah-case-slide-in {
  from { top: calc(100% - 71px); }
  to   { top: 0%; }
}

/* Case study image overlay — slide out to bottom */
@keyframes enoah-case-slide-out {
  from { top: 0%; }
  to   { top: calc(100% - 71px); }
}

/* Megamenu - Submenu animation */
@keyframes mymove {
    0% {
        height: 0;
        opacity: 0;
    }
    75% {
        height: auto;
        opacity: 0.5;
    }
    100% {
        height: auto;
        opacity: 1;
    }
}

/* Read-more link button pulse */
@keyframes enoah-zoom-pulse {
  0%   { scale: 100%; }
  50%  { scale: 125%; }
  100% { scale: 100%; }
}

/* Button arrow left to right */
@keyframes ani-lft-from-rgt {
    49% {
        transform: translate(-100%)
    }
    50% {
        opacity: 0;
        transform: translate(100%)
    }
    51% {
        opacity: 1
    }
}

/* Button arrow right to left */
@keyframes ani-rgt-from-lft {
    49% {
        transform: translate(100%)
    }

    50% {
        opacity: 0;
        transform: translate(-100%)
    }

    51% {
        opacity: 1
    }
}

/* Video - play button pulse animation */
@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: .5;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}