/* ==========================================================================
   Varnamala Technologies – Central Design Tokens
   Source: Varnamala_Design_System_Specs.md & Design System Sheet
   ========================================================================== */

:root {
  /* Brand Palette */
  --navy: #063F56;          /* Deep Varnamala Blue (Primary brand color) */
  --navy2: #052F42;         /* Deep Navy (Hero, dark sections, footer) */
  --blue: #0A78A9;          /* Enterprise Blue (Links, eyebrows, accents) */
  --gold: #F5A800;          /* Primary Accent (CTAs, primary highlights) */
  --gold2: #FFBD2E;         /* Highlight Accent (Hover states, badges) */

  /* Neutral & Functional Palette */
  --ink: #12212A;           /* Dark Charcoal (Headings & primary copy) */
  --body: #18242B;          /* Body copy & Navigation text */
  --muted: #5E6B73;         /* Muted Grey (Subtitles, descriptions) */
  --muted-light: #8A969C;   /* Light Muted (Secondary tags, borders) */
  --line: #DCE2E6;          /* Card borders & dividers */
  --line-light: #E3E7E9;    /* Subtle dividers */
  --soft: #F3F5F6;          /* Sticky header bg & alternating sections */
  --white: #FFFFFF;         /* White cards & clean section backgrounds */

  /* Typography Families */
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Typography Scales (Fluid clamp() matching Excel ranges) */
  --h1-size: clamp(44px, 5.2vw, 74px);    /* H1 – Hero: 44–74px responsive */
  --h2-size: clamp(32px, 3.8vw, 50px);    /* H2 – Section: 32–50px responsive */
  --h3-size: clamp(21px, 2.2vw, 28px);    /* H3 – Card: 21–28px */
  --eyebrow-size: 12px;                  /* Eyebrow: 12px uppercase */
  --nav-size: 15px;                      /* Navigation: 15px */
  --btn-size: clamp(15px, 1.1vw, 16px);   /* Button: 15–16px */
  --body-size: 16px;                     /* Main Text: 16px base */
  --desc-size: clamp(14px, 1.05vw, 16px); /* Secondary Text: 14–16px */

  /* Line Heights */
  --lh-tight: 1.12;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  /* Layout & Geometry */
  --container-max: 1240px;
  --header-height: 88px;
  --header-height-mobile: 72px;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Elevation & Shadows */
  --shadow-sm: 0 4px 12px rgba(18, 33, 42, 0.05);
  --shadow-md: 0 12px 30px rgba(18, 33, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(18, 33, 42, 0.12);

  /* Transitions */
  --transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}