@charset "UTF-8";
/* =====================================================================
   GCC — Design Tokens
   gccinfra.in · Govind Construction Company

   One source of truth for colour, type, space, radius, shadow, motion,
   layout and z-index. Nothing downstream hardcodes a value.

   Palette is taken from the company's own logo, sampled directly:
     blue   #0552CA   the dominant mark colour -> structure, depth, dark UI
     green  #1E9500   the signal colour        -> actions, links, success
     sun    #FED801   the solar highlight      -> rationed to power moments
   Deep blue does the architectural work because it is what the logo leads
   with; green is reserved for things you can act on, so it never becomes
   wallpaper; the sun yellow appears rarely enough to still mean something.
   Neutrals are cooled very slightly toward the blue so nothing looks grey
   next to the mark.

   Light is the default. Dark engages when the operating system asks for
   it, or after dark locally, and a manual choice always wins.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------- brand ramp
     Anchored on the logo blue #0552CA. */
  --blue-950: #04122B;
  --blue-900: #071C42;
  --blue-800: #0A2757;
  --blue-700: #0B3574;
  --blue-600: #0A4499;
  --blue-500: #0552CA;   /* logo blue */
  --blue-400: #2D74E0;
  --blue-300: #6699EC;
  --blue-200: #A6C4F5;
  --blue-100: #D3E2FA;
  --blue-050: #EDF3FE;

  /* Green ramp, anchored on the logo green #1E9500. */
  --green-900: #0C3A05;
  --green-800: #114F07;
  --green-700: #166609;
  --green-600: #1A7D0B;
  --green-500: #1E9500;   /* logo green */
  --green-400: #35B015;
  --green-300: #66CB4C;
  --green-200: #A5E294;
  --green-100: #D5F3CB;
  --green-050: #EEFAEA;

  /* Solar ramp, anchored on the logo sun #FED801. */
  --sun-700: #9A7F00;
  --sun-600: #C7A400;
  --sun-500: #FED801;   /* logo sun */
  --sun-400: #FFE44A;
  --sun-300: #FFEF8C;
  --sun-100: #FFFAD6;

  /* ---------------------------------------------------------------- neutrals
     Very slightly cooled toward the mark blue. */
  --ink-950: #070C16;
  --ink-900: #0E1522;
  --ink-800: #16202F;
  --ink-700: #1F2C3E;
  --ink-600: #33415A;
  --ink-500: #4C5B76;
  --ink-400: #71809A;
  --ink-300: #9BA8BE;
  --ink-200: #C3CDDC;
  --ink-150: #DAE1EB;
  --ink-100: #E8EDF3;
  --ink-050: #F3F6FA;
  --ink-025: #F9FBFD;
  --paper:    #FCFDFE;

  /* ---------------------------------------------------------------- status */
  --danger:  #C0281F;
  --info:    #0A4499;

  /* ---------------------------------------------------------------- typography */
  --font-display: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-num:     'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  /* Indic scripts. Loaded only for the active language; see includes/header.php. */
  --font-deva:  'Noto Sans Devanagari', var(--font-body);
  --font-beng:  'Noto Sans Bengali', var(--font-body);
  --font-telu:  'Noto Sans Telugu', var(--font-body);
  --font-taml:  'Noto Sans Tamil', var(--font-body);
  --font-gujr:  'Noto Sans Gujarati', var(--font-body);
  --font-knda:  'Noto Sans Kannada', var(--font-body);
  --font-mlym:  'Noto Sans Malayalam', var(--font-body);
  --font-guru:  'Noto Sans Gurmukhi', var(--font-body);
  --font-orya:  'Noto Sans Oriya', var(--font-body);
  --font-arab:  'Noto Nastaliq Urdu', var(--font-body);

  /* Fluid scale, 1.25 major third, held between 360px and 1600px.
     Deliberately restrained: architectural, not billboard. */
  --t-caption:    0.75rem;    /* 12 */
  --t-label:      0.8125rem;  /* 13 */
  --t-small:      0.875rem;   /* 14 */
  --t-body:       0.9688rem;  /* 15.5 */
  --t-body-lg:    clamp(1rem, 0.2vw + 0.96rem, 1.0938rem);
  --t-h4:         clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  --t-h3:         clamp(1.25rem, 0.55vw + 1.12rem, 1.4375rem);
  --t-h2:         clamp(1.5rem, 1.15vw + 1.24rem, 2.0625rem);
  --t-h1:         clamp(1.9375rem, 2.1vw + 1.45rem, 2.875rem);
  --t-display:    clamp(2.25rem, 3.5vw + 1.4rem, 3.875rem);
  --t-display-lg: clamp(2.5rem, 4.6vw + 1.4rem, 4.75rem);

  --lh-tight:  1.14;
  --lh-snug:   1.28;
  --lh-normal: 1.55;
  --lh-relaxed:1.72;

  --ls-display: -0.028em;
  --ls-heading: -0.018em;
  --ls-body:     0;
  --ls-label:    0.045em;
  --ls-caps:     0.11em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* ---------------------------------------------------------------- spacing (4px base) */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;

  --section-y:  clamp(64px, 6.5vw, 116px);
  --section-y-sm: clamp(44px, 4.5vw, 76px);
  --gutter:     clamp(20px, 4vw, 56px);

  /* ---------------------------------------------------------------- layout */
  --w-narrow: 720px;
  --w-text:   68ch;
  --w-content:1240px;
  --w-wide:   1520px;
  --header-h: 90px;
  --header-h-stuck: 68px;

  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1120px;
  --bp-xl: 1440px;

  /* ---------------------------------------------------------------- radius
     Architectural, not bubbly. Large radii are reserved for pills. */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------- icon sizes */
  --ico-xs: 14px;
  --ico-sm: 16px;
  --ico-md: 20px;
  --ico-lg: 24px;
  --ico-xl: 32px;

  /* ---------------------------------------------------------------- motion */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-in:   cubic-bezier(.55, 0, 1, .45);
  --ease-both: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-5: 700ms;

  /* ---------------------------------------------------------------- z-index */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   100;
  --z-header:   200;
  --z-drawer:   300;
  --z-dropdown: 400;
  --z-modal:    500;
  --z-toast:    600;
}

/* =====================================================================
   LIGHT THEME — the default
   Deep blue carries structure; green marks anything actionable.
   ===================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:          var(--paper);
  --bg-subtle:   var(--ink-050);
  --bg-sunken:   var(--ink-100);
  --surface:     #FFFFFF;
  --surface-2:   var(--ink-025);
  --surface-3:   var(--ink-050);
  --surface-inv: var(--blue-900);

  --text:        var(--ink-900);
  --text-strong: var(--ink-950);
  --text-soft:   var(--ink-600);
  --text-muted:  var(--ink-500);
  /* #71809A on white is exactly 4.00:1 — under the 4.5:1 that AA asks of body
     text, and this token is used for real copy (card footnotes, section
     labels), not just decoration. Darkened one step so every use passes. */
  --text-faint:  #5F6E88;
  --text-on-dark: #EEF3F9;
  --text-on-brand:#FFFFFF;

  --line:        var(--ink-150);
  --line-soft:   var(--ink-100);
  --line-strong: var(--ink-200);

  /* Action colour: the logo green, deepened just enough to hold 4.5:1 on white. */
  --brand:        var(--green-700);
  --brand-hover:  var(--green-800);
  --brand-active: var(--green-900);
  --brand-soft:   var(--green-050);
  --brand-border: var(--green-100);
  --on-brand:     #FFFFFF;

  /* Structural colour: the logo blue. Footers, inverse bands, deep surfaces. */
  --deep:         var(--blue-900);
  --deep-2:       var(--blue-800);
  --accent:       var(--blue-500);
  --accent-soft:  var(--blue-050);
  --accent-text:  var(--blue-700);

  --solar:        var(--sun-500);
  --solar-soft:   var(--sun-100);
  --solar-text:   var(--sun-700);

  --scrim:        rgba(7, 12, 22, .55);
  --grid-line:    rgba(10, 68, 153, .07);

  --sh-xs: 0 1px 2px rgba(7, 12, 22, .05);
  --sh-sm: 0 1px 3px rgba(7, 12, 22, .07), 0 1px 2px rgba(7, 12, 22, .04);
  --sh-md: 0 4px 14px -4px rgba(7, 12, 22, .10), 0 2px 5px -2px rgba(7, 12, 22, .06);
  --sh-lg: 0 18px 40px -14px rgba(7, 12, 22, .16), 0 6px 14px -6px rgba(7, 12, 22, .08);
  --sh-xl: 0 34px 70px -22px rgba(7, 12, 22, .22);
  /* Hero ground — paper with a breath of brand in the corners. */
  --hero-bg:     #FBFCFD;
  --hero-wash-a: #E8F6E2;
  --hero-wash-b: #EEF4FE;

  --sh-brand: 0 10px 26px -10px rgba(22, 102, 9, .38);
}

/* =====================================================================
   DARK THEME — designed, not inverted
   The ground is the logo navy pushed almost to black, so the mark sits in
   its own colour family. Green brightens to stay legible; the sun dims so
   it reads as a highlight rather than a lamp.
   ===================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #070C15;
  --bg-subtle:   #0A1120;
  --bg-sunken:   #050910;
  --surface:     #0E1728;
  --surface-2:   #131E33;
  --surface-3:   #1A2740;
  --surface-inv: var(--ink-050);

  --text:        #E6EDF7;
  --text-strong: #F5F9FE;
  --text-soft:   #BAC7DA;
  --text-muted:  #8D9CB4;
  --text-faint:  #7C8BA6;

  --hero-bg:     #060B14;
  --hero-wash-a: #0D2313;
  --hero-wash-b: #0A1730;
  --text-on-dark: #EEF3F9;
  --text-on-brand:#FFFFFF;

  --line:        rgba(198, 219, 245, .11);
  --line-soft:   rgba(198, 219, 245, .07);
  --line-strong: rgba(198, 219, 245, .19);

  --brand:        var(--green-400);
  --brand-hover:  var(--green-300);
  --brand-active: var(--green-200);
  --brand-soft:   rgba(53, 176, 21, .14);
  --brand-border: rgba(53, 176, 21, .32);
  --on-brand:     #06240B;

  --deep:         #050910;
  --deep-2:       #0A1120;
  --accent:       var(--blue-300);
  --accent-soft:  rgba(102, 153, 236, .14);
  --accent-text:  var(--blue-200);

  --solar:        var(--sun-400);
  --solar-soft:   rgba(255, 228, 74, .13);
  --solar-text:   var(--sun-300);

  --scrim:        rgba(3, 6, 12, .68);
  --grid-line:    rgba(166, 196, 245, .07);

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, .48);
  --sh-md: 0 6px 18px -6px rgba(0, 0, 0, .60);
  --sh-lg: 0 20px 44px -16px rgba(0, 0, 0, .70);
  --sh-xl: 0 36px 76px -24px rgba(0, 0, 0, .78);
  --sh-brand: 0 10px 28px -12px rgba(53, 176, 21, .40);
}

/* The operating system asking for dark counts as a night signal, but only
   until the visitor makes a choice of their own (which stamps data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #070C15;          --bg-subtle: #0A1120;   --bg-sunken: #050910;
    --surface: #0E1728;     --surface-2: #131E33;   --surface-3: #1A2740;
    --surface-inv: var(--ink-050);
    --text: #E6EDF7;        --text-strong: #F5F9FE; --text-soft: #BAC7DA;
    --text-muted: #8D9CB4;  --text-faint: #7C8BA6;
    --line: rgba(198,219,245,.11); --line-soft: rgba(198,219,245,.07); --line-strong: rgba(198,219,245,.19);
    --brand: var(--green-400);     --brand-hover: var(--green-300);    --brand-active: var(--green-200);
    --brand-soft: rgba(53,176,21,.14); --brand-border: rgba(53,176,21,.32); --on-brand: #06240B;
    --deep: #050910;        --deep-2: #0A1120;
    --accent: var(--blue-300);     --accent-soft: rgba(102,153,236,.14); --accent-text: var(--blue-200);
    --solar: var(--sun-400);       --solar-soft: rgba(255,228,74,.13);   --solar-text: var(--sun-300);
    --scrim: rgba(3,6,12,.68);     --grid-line: rgba(166,196,245,.07);
    --sh-xs: 0 1px 2px rgba(0,0,0,.40);
    --sh-sm: 0 1px 3px rgba(0,0,0,.48);
    --sh-md: 0 6px 18px -6px rgba(0,0,0,.60);
    --sh-lg: 0 20px 44px -16px rgba(0,0,0,.70);
    --sh-xl: 0 36px 76px -24px rgba(0,0,0,.78);
    --sh-brand: 0 10px 28px -12px rgba(53,176,21,.40);
  }
}