/* ============================================================
   SCHNEIDER ELECTRIC — Colors & Type
   Public Sector vertical (Smart Airports / Transportation)
   Reference: https://www.se.com/us/en/work/solutions/transportation/smart-airports/
   ============================================================ */

/* -----------------------------------------------------------
   Fonts — Schneider Electric public web uses
   "Arial Rounded MT for SE" with system fallbacks.
   ----------------------------------------------------------- */

:root {
    
    /*<link rel="preconnect" href="https://fonts.googleapis.com">*/
    /*<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>*/
    /*<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">*/

  /* =========================================================
     COLORS — Brand
     ========================================================= */

  /* Schneider Green is the heart of the brand. The bright
     "vivid" green is the primary brand mark color. The deeper
     green is used for type/UI accents because vivid green
     fails contrast on white. */
  --se-green-vivid:   #3DCD58; /* "Schneider Green" — logo, banners, hero */
  --se-green:         #3DCD58; /* alias */
  --se-green-500:     #009530; /* Primary UI green (text on white, links) */
  --se-green-600:     #008029; /* hover */
  --se-green-700:     #006D23; /* press */
  --se-green-400:     #42B649; /* lighter accent */
  --se-green-100:     #E6F7E8; /* tint background */
  --se-green-50:      #F2FAF3; /* very light tint */

  /* Life Is On — hero banner green (slightly more saturated) */
  --se-life-green:    #3DCD58;

  /* Neutrals — Schneider uses a cool, near-black for type
     and a soft warm-gray family for surfaces */
  --se-black:         #0F0F0F;
  --se-gray-900:      #1F1F1F;
  --se-gray-800:      #333333; /* primary body */
  --se-gray-700:      #4D4D4D;
  --se-gray-600:      #6B6B6B;
  --se-gray-500:      #898989;
  --se-gray-400:      #B3B3B3;
  --se-gray-300:      #D4D4D4;
  --se-gray-200:      #E5E5E5;
  --se-gray-150:      #EFEFEF;
  --se-gray-100:      #F5F5F5; /* page section bg */
  --se-gray-50:       #FAFAFA;
  --se-white:         #FFFFFF;

  /* Semantic */
  --se-info:          #1E88E5;
  --se-warn:          #F5A623;
  --se-error:         #D0021B;
  --se-success:       var(--se-green-500);

  /* Brand palette extras observed on se.com / Quartz */
  --se-blue:          #0C5A9E;   /* secondary marketing blue */
  --se-teal:          #00838A;   /* sustainability teal */
  --se-yellow:        #FFD500;   /* energy accent */

  /* =========================================================
     SEMANTIC COLOR TOKENS
     ========================================================= */
  --fg-1:             var(--se-gray-900);   /* headlines */
  --fg-2:             var(--se-gray-800);   /* body */
  --fg-3:             var(--se-gray-600);   /* meta / captions */
  --fg-4:             var(--se-gray-500);   /* disabled */
  --fg-onbrand:       var(--se-white);      /* text on green */
  --fg-link:          var(--se-green-500);
  --fg-link-hover:    var(--se-green-600);

  --bg-1:             var(--se-white);      /* page */
  --bg-2:             var(--se-gray-50);    /* alt section */
  --bg-3:             var(--se-gray-100);   /* card surface */
  --bg-brand:         var(--se-green-vivid);/* hero bg */
  --bg-brand-deep:    var(--se-green-500);  /* CTA bg */
  --bg-dark:          var(--se-black);      /* dark sections / footer */

  --border-1:         var(--se-gray-200);
  --border-2:         var(--se-gray-300);
  --border-strong:    var(--se-gray-700);
  --divider:          var(--se-gray-200);

  /* =========================================================
     TYPE — Family
     ========================================================= */
  --font-sans:        'Poppins', ui-sans-serif, system-ui, sans-serif,
                      'Poppins', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-display:     'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights — SE leans heavy */
  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;
  --fw-black:         900;

  /* Type scale — desktop. Loosely matches se.com hero/sections */
  --fs-display:       64px; /* hero H1 */
  --fs-h1:            48px;
  --fs-h2:            36px;
  --fs-h3:            28px;
  --fs-h4:            22px;
  --fs-h5:            18px;
  --fs-body-lg:       18px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-caption:       12px;
  --fs-eyebrow:       13px;

  --lh-tight:         1.1;
  --lh-snug:          1.25;
  --lh-normal:        1.45;
  --lh-relaxed:       1.6;

  --ls-tight:         -0.01em;
  --ls-eyebrow:       0.08em;

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --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: 96px;
  --space-32: 128px;

  /* =========================================================
     RADII — Quartz uses moderate, never pill-on-everything
     ========================================================= */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;   /* default cards / inputs */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* =========================================================
     SHADOWS / ELEVATION
     Schneider uses subtle, technical shadows. No glow.
     ========================================================= */
  --shadow-1: 0 1px 2px rgba(15, 15, 15, 0.06);
  --shadow-2: 0 2px 6px rgba(15, 15, 15, 0.08);
  --shadow-3: 0 6px 16px rgba(15, 15, 15, 0.10);
  --shadow-4: 0 12px 32px rgba(15, 15, 15, 0.12);
  --shadow-focus: 0 0 0 3px rgba(61, 205, 88, 0.35);

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-xl: 1440px;
  --container-lg: 1200px;
  --container-md: 960px;
  --gutter:       24px;

  /* =========================================================
     MOTION
     Restrained, professional — no bounces, no springs.
     ========================================================= */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph:     cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;
}

/* =============================================================
   SEMANTIC CLASS UTILITIES
   ============================================================= */

html, body {
  font-family: 'var(--font-sans)';
  color: var(--fg-2);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

.se-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

h1, .se-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .se-h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h3, .se-h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .se-h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h5, .se-h5 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .se-p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
}

.se-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.se-body-sm { font-size: var(--fs-body-sm); }
.se-caption { font-size: var(--fs-caption); color: var(--fg-3); }
.se-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--se-green-500);
}

a { color: var(--fg-link); text-decoration: none; }
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

code, .se-mono { font-family: var(--font-mono); font-size: 0.95em; }