/* ============================================================
   SABL — Colors & Type
   Shrem Asbri BG Limited design-system tokens.
   Brighter Shrem-inspired palette: vivid blue, fresh green,
   saffron orange. Type: DM Sans (Google Fonts).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

:root {
    /* ---------- NEUTRALS ---------- */
    --white:      #FFFFFF;
    --off-white:  #F6FAF5;   /* subtly green-tinged */
    --paper:      #FAFBFA;
    --gray-50:    #F3F5F4;
    --gray-100:   #E9ECEA;
    --gray-200:   #E1E5E3;
    --gray-300:   #CBD1CE;
    --gray-400:   #9AA3A0;
    --gray-500:   #6A7370;
    --gray-600:   #4A5450;
    --gray-700:   #2E3734;
    --gray-800:   #1B211F;
    --gray-900:   #0E1311;

    /* ---------- NAVY (primary dark, Shrem-inspired) ---------- */
    --navy-950:   #040A20;
    --navy-900:   #0A1536;
    --navy-800:   #122052;
    --navy-700:   #1C2E75;
    --navy-600:   #243C95;

    /* ---------- BLUE (institutional trust accent) ---------- */
    --blue-50:    #EAF3FF;
    --blue-100:   #CCE2FF;
    --blue-300:   #6BA8FF;
    --blue-500:   #2778E8;    /* brighter — brand mid-blue */
    --blue-600:   #1460D1;
    --blue-700:   #0F4DA8;

    /* ---------- GREEN (primary eco action color) ---------- */
    --green-50:   #E7FBEE;
    --green-100:  #C5F3D4;
    --green-300:  #74D58F;
    --green-400:  #3FD472;
    --green-500:  #1FC058;    /* brighter fresh green — primary CTA */
    --green-600:  #17A048;
    --green-700:  #107236;

    /* ---------- ORANGE (saffron energy accent, from SABL logo) ---------- */
    --orange-50:  #FFF1E0;
    --orange-100: #FFDCB0;
    --orange-300: #FFAE66;
    --orange-400: #FB952E;
    --orange-500: #F57C1F;    /* logo saffron — brand accent */
    --orange-600: #D66308;
    --orange-700: #A84B04;

    /* ---------- SEMANTIC FOREGROUND ---------- */
    --fg-1:         var(--gray-900);   /* headings */
    --fg-2:         var(--gray-700);   /* body */
    --fg-3:         var(--gray-500);   /* muted / lead / captions */
    --fg-4:         var(--gray-400);   /* placeholder, disabled */
    --fg-on-dark-1: #FFFFFF;
    --fg-on-dark-2: rgba(255,255,255,0.70);
    --fg-on-dark-3: rgba(255,255,255,0.45);
    --fg-on-dark-4: rgba(255,255,255,0.28);

    /* ---------- SEMANTIC BACKGROUND ---------- */
    --bg-page:      var(--white);
    --bg-subtle:    var(--off-white);
    --bg-dark:      var(--navy-900);
    --bg-dark-2:    var(--navy-950);
    --bg-card:      var(--white);
    --bg-card-dark: rgba(255,255,255,0.05);

    /* ---------- SEMANTIC BORDERS ---------- */
    --border-light:      var(--gray-200);
    --border-subtle:     var(--gray-100);
    --border-on-dark-1:  rgba(255,255,255,0.10);
    --border-on-dark-2:  rgba(255,255,255,0.05);

    /* ---------- BRAND ACTIONS ---------- */
    --action-primary:       var(--green-500);
    --action-primary-hover: var(--green-600);
    --action-secondary:     var(--blue-500);
    --action-secondary-hover:var(--blue-600);
    --action-accent:        var(--orange-500);
    --action-accent-hover:  var(--orange-600);

    /* ---------- TYPE ---------- */
    --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'DM Sans', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Fluid display sizes (clamp: min, preferred, max) */
    --text-display-xl: clamp(44px, 6.5vw, 80px);   /* hero title */
    --text-display-l:  clamp(36px, 5vw,   60px);   /* h1 page */
    --text-h2:         clamp(28px, 4vw,   44px);
    --text-h3:         clamp(22px, 2.6vw, 28px);
    --text-h4:         19px;
    --text-lead:       17px;
    --text-body:       16px;
    --text-small:      14px;
    --text-caption:    13px;
    --text-eyebrow:    12px;
    --text-micro:      11px;

    --leading-tight:  1.06;
    --leading-snug:   1.2;
    --leading-normal: 1.6;
    --leading-relaxed:1.75;
    --leading-loose:  1.85;

    --tracking-display: -0.03em;
    --tracking-h2:      -0.02em;
    --tracking-h3:      -0.01em;
    --tracking-body:    0;
    --tracking-eyebrow: 0.12em;
    --tracking-micro:   0.08em;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semi:     600;
    --weight-bold:     700;
    --weight-black:    800;

    /* ---------- SPACING SCALE ---------- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  104px;   /* section vertical rhythm */
    --space-section:      104px;
    --space-section-sm:    72px;
    --container-max:     1240px;
    --container-pad:       24px;

    /* ---------- RADII ---------- */
    --radius-xs:  6px;
    --radius-sm:  8px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  22px;
    --radius-2xl: 24px;
    --radius-pill:50px;
    --radius-logo:10px;

    /* ---------- SHADOWS ---------- */
    --shadow-e1:       0 1px 4px   rgba(0,0,0,0.06);
    --shadow-e2:       0 4px 16px  rgba(0,0,0,0.07);
    --shadow-e3:       0 16px 48px rgba(0,0,0,0.10);
    --shadow-action:   0 8px 24px  rgba(35,168,80,0.35);
    --shadow-action-b: 0 8px 24px  rgba(39,120,232,0.32);
    --shadow-action-o: 0 8px 24px  rgba(245,124,31,0.32);
    --shadow-nav:      0 4px 24px  rgba(0,0,0,0.25);

    /* ---------- MOTION ---------- */
    --ease-ui:      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-expo:cubic-bezier(0.22, 1, 0.36, 1);
    --dur-xs:  120ms;
    --dur-sm:  200ms;
    --dur-md:  240ms;
    --dur-lg:  400ms;
    --dur-xl:  650ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.t-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--green-600);
    line-height: 1;
}

.t-display-xl {
    font-family: var(--font-display);
    font-size: var(--text-display-xl);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    color: var(--fg-1);
}

.t-display-l {
    font-family: var(--font-display);
    font-size: var(--text-display-l);
    font-weight: var(--weight-black);
    line-height: 1.08;
    letter-spacing: var(--tracking-display);
    color: var(--fg-1);
}

.t-h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: 1.12;
    letter-spacing: var(--tracking-h2);
    color: var(--fg-1);
}

.t-h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: 1.18;
    letter-spacing: var(--tracking-h3);
    color: var(--fg-1);
}

.t-h4 {
    font-family: var(--font-sans);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    color: var(--fg-1);
}

.t-lead {
    font-family: var(--font-sans);
    font-size: var(--text-lead);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--fg-3);
}

.t-body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--fg-2);
}

.t-small {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--fg-2);
}

.t-caption {
    font-family: var(--font-sans);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    color: var(--fg-3);
}

.t-micro {
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
    color: var(--fg-3);
}

/* Accent span used inside headings — e.g. "Powering India's <span class='t-accent-green'>Green Energy</span> Future" */
.t-accent-green   { color: var(--green-500); }
.t-accent-blue    { color: var(--blue-500); }
.t-accent-orange  { color: var(--orange-500); }

/* Gradient accent for hero title highlight */
.t-gradient-green {
    background: linear-gradient(135deg, var(--green-400), var(--green-300));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.t-gradient-saffron {
    background: linear-gradient(135deg, var(--orange-500), #FFB067);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* On-dark variants */
.on-dark .t-display-xl,
.on-dark .t-display-l,
.on-dark .t-h2,
.on-dark .t-h3,
.on-dark .t-h4 { color: var(--fg-on-dark-1); }
.on-dark .t-lead,
.on-dark .t-body { color: var(--fg-on-dark-2); }
.on-dark .t-caption,
.on-dark .t-small { color: var(--fg-on-dark-3); }
.on-dark .t-eyebrow { color: var(--green-300); }