/* ==========================================================================
   SystemEarth Design Tokens
   Source of truth: New Branding/Brand Guidelines/Brand Guidelines.pdf
   plus the logo SVG masters in New Branding/Logo/svg/.
   Every value below traces to those files. Do not invent new values.

   Known source typos reconciled against the ramp pages and SVG masters:
   - The core palette page lists Dark Navy as "#1E53A3" (duplicate of the
     mid blue). The correct navy is #1D357B (= Blue Ribbon 900).
   - The White ramp page prints step 700 as "#3D2BCD". The swatch and the
     guideline SVG sources give #4D4D4D.
   - The secondary-logo page calls the logotype color "#1E3A8A". The logo
     SVG masters use #131F36 (= Tory Blue 950) for the wordmark.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (licensed brand fonts, bundled as TTF in ../assets/fonts/)
   Euclid Circular A  = PRIMARY, headlines (Regular / Medium / SemiBold)
   Plus Jakarta Sans  = SECONDARY, subheads and body (Light..ExtraBold)
   GC Arbiter Demo    = eyebrow text, stats, image captions ONLY, lowercase
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Euclid Circular A'; src: url('../assets/fonts/EuclidCircularA-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Euclid Circular A'; src: url('../assets/fonts/EuclidCircularA-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Euclid Circular A'; src: url('../assets/fonts/EuclidCircularA-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'GC Arbiter Demo'; src: url('../assets/fonts/GCArbiterDemo-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'GC Arbiter Demo'; src: url('../assets/fonts/GCArbiterDemo-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* ------------------------------------------------------------------------
     Core palette (guidelines "Color Palette" page)
     Usage weighting: blue 40% / mid blue 20% / navy 15% / yellow-green 15%
     / supernova 7% / white 3%
     ------------------------------------------------------------------------ */
  --se-blue:      #2663EB;  /* primary brand blue */
  --se-blue-mid:  #1E53A3;  /* mid blue */
  --se-navy:      #1D357B;  /* dark navy (= blue-ribbon-900) */
  --se-green:     #B7D97D;  /* yellow green (= yellow-green-300) */
  --se-yellow:    #FACC14;  /* supernova accent */
  --se-white:     #FFFFFF;
  --se-ink:       #131F36;  /* wordmark ink (= tory-blue-950) */

  /* Logo-only tints (from the logo SVG masters; not general-purpose UI colors) */
  --se-logo-blue-light: #60A5FA;
  --se-logo-blue-pale:  #BFDBFE;

  /* ------------------------------------------------------------------------
     Blue Ribbon ramp
     ------------------------------------------------------------------------ */
  --se-blue-ribbon-50:  #EDF5FE;
  --se-blue-ribbon-100: #D6E8FC;
  --se-blue-ribbon-200: #B8D7FB;
  --se-blue-ribbon-300: #8AC0F8;
  --se-blue-ribbon-400: #589DF3;
  --se-blue-ribbon-500: #377AEE;
  --se-blue-ribbon-600: #265DE1;
  --se-blue-ribbon-700: #1E49CC;
  --se-blue-ribbon-800: #1E3BA1;
  --se-blue-ribbon-900: #1D357B;
  --se-blue-ribbon-950: #172348;

  /* Tory Blue ramp */
  --se-tory-blue-50:  #F0F5FC;
  --se-tory-blue-100: #E0E8F8;
  --se-tory-blue-200: #BDD3EF;
  --se-tory-blue-300: #86AEE2;
  --se-tory-blue-400: #4D87D1;
  --se-tory-blue-500: #2D69BC;
  --se-tory-blue-600: #1E4C95;
  --se-tory-blue-700: #1B3F7B;
  --se-tory-blue-800: #1A3664;
  --se-tory-blue-900: #1A2F52;
  --se-tory-blue-950: #131F36;

  /* White / neutral ramp */
  --se-neutral-50:  #F3F1FE;
  --se-neutral-100: #E6E6E6;
  --se-neutral-200: #CCCCCC;
  --se-neutral-300: #B3B3B3;
  --se-neutral-400: #999999;
  --se-neutral-500: #808080;
  --se-neutral-600: #666666;
  --se-neutral-700: #4D4D4D; /* PDF prints "#3D2BCD"; see typo note above */
  --se-neutral-800: #333333;
  --se-neutral-900: #1A1A1A;
  --se-neutral-950: #121212;

  /* Yellow Green ramp */
  --se-yellow-green-50:  #F5FAEB;
  --se-yellow-green-100: #E9F3D4;
  --se-yellow-green-200: #D4E9AD;
  --se-yellow-green-300: #B7D97D;
  --se-yellow-green-400: #9BC754;
  --se-yellow-green-500: #7DAC36;
  --se-yellow-green-600: #608927;
  --se-yellow-green-700: #4A6922;
  --se-yellow-green-800: #3D5420;
  --se-yellow-green-900: #35481F;
  --se-yellow-green-950: #1A270C;

  /* Supernova ramp */
  --se-supernova-50:  #FEFBE6;
  --se-supernova-100: #FEF7C0;
  --se-supernova-200: #FDEC89;
  --se-supernova-300: #FCD953;
  --se-supernova-400: #F8C239;
  --se-supernova-500: #E5A630;
  --se-supernova-600: #C17B26;
  --se-supernova-700: #95541D;
  --se-supernova-800: #79411B;
  --se-supernova-900: #65351A;
  --se-supernova-950: #391C0E;

  /* ------------------------------------------------------------------------
     Gradient palette (guidelines "Gradient Palette" pages, styles 1-10)
     Style 1 is the PRIMARY BRAND GRADIENT: the core style, default for all
     designs. Styles 2-10 are secondary. EVERY gradient must carry the brand
     grain (pair any .se-bg-gradient-* with .se-grain or .se-grain-svg);
     a flat, smooth gradient is off-brand and not allowed.
     ------------------------------------------------------------------------ */
  --se-gradient-1:  linear-gradient(90deg, #1D357B 0%, #2663EB 51%, #B7D97D 100%); /* PRIMARY */
  --se-gradient-2:  linear-gradient(90deg, #589DF3 0%, #7DAC36 51%, #D6E8FC 100%);
  --se-gradient-3:  linear-gradient(90deg, #1D357B 0%, #8AC0F8 51%, #B7D97D 100%);
  --se-gradient-4:  linear-gradient(90deg, #E0E8F8 0%, #8AC0F8 51%, #B7D97D 100%);
  --se-gradient-5:  linear-gradient(90deg, #FACC14 0%, #2663EB 51%, #1E53A3 100%);
  --se-gradient-6:  linear-gradient(90deg, #377AEE 0%, #B7D97D 51%, #FDEC89 100%);
  --se-gradient-7:  linear-gradient(90deg, #1E53A3 0%, #2663EB 100%);
  --se-gradient-8:  linear-gradient(90deg, #2663EB 0%, #FACC14 100%);
  --se-gradient-9:  linear-gradient(90deg, #2663EB 0%, #B7D97D 100%);
  --se-gradient-10: linear-gradient(90deg, #7DAC36 0%, #FDEC89 100%);

  /* ------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------ */
  --se-font-display: 'Euclid Circular A', 'Avenir Next', 'Century Gothic', sans-serif;
  --se-font-body:    'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --se-font-data:    'GC Arbiter Demo', 'IBM Plex Mono', 'Courier New', monospace;

  /* Website hierarchy (guidelines "Typography & Hierarchy on Website" table:
     size / line-height in px) */
  --se-h1-size: 44px;   --se-h1-lh: 56px;   /* Euclid SemiBold */
  --se-h2-size: 38px;   --se-h2-lh: 40px;   /* Euclid SemiBold */
  --se-h3-size: 28px;   --se-h3-lh: 35px;   /* Euclid SemiBold */
  --se-body1-size: 16px; --se-body1-lh: 22px; /* Jakarta Bold */
  --se-body2-size: 14px; --se-body2-lh: 20px; /* Jakarta Regular */
  --se-body3-size: 12px; --se-body3-lh: 18px; /* Jakarta Bold */
  --se-eyebrow-size: 14px; --se-eyebrow-lh: 20px; /* GC Arbiter Light, lowercase only */

  /* Presentation scale (16:9 deck examples in the guidelines) */
  --se-pres-headline-size: 96px;   /* Euclid SemiBold or Regular */
  --se-pres-body-size: 24px;       /* Jakarta Regular */
  --se-pres-stat-size: 96px;       /* GC Arbiter Light */
  --se-pres-stat-label-size: 16px; /* Jakarta Regular */
  --se-pres-eyebrow-size: 32px;    /* GC Arbiter Light */
  --se-pres-number-size: 48px;     /* GC Arbiter Light section numbers */

  /* ------------------------------------------------------------------------
     Motion (design-system layer; not from the print guidelines)
     Restrained, premium easing to match the understated personality.
     ------------------------------------------------------------------------ */
  --se-dur-micro:  200ms;  /* hovers, small state changes */
  --se-dur-short:  400ms;  /* element entrances */
  --se-dur-reveal: 800ms;  /* logo part builds, section reveals */
  --se-dur-hold:  1200ms;  /* settle/hold beats inside a sequence */
  --se-dur-bumper: 3200ms; /* full intro sting, 2.5-4s window */
  --se-dur-loop:   4000ms; /* seamless social loop period, 3-6s window */

  --se-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* decisive arrival, no bounce */
  --se-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);  /* symmetric travel */
  --se-ease-linear: linear;                          /* continuous orbits only */
}

/* --------------------------------------------------------------------------
   Type utility classes (website hierarchy)
   -------------------------------------------------------------------------- */
.se-h1 { font-family: var(--se-font-display); font-size: var(--se-h1-size); line-height: var(--se-h1-lh); font-weight: 600; }
.se-h2 { font-family: var(--se-font-display); font-size: var(--se-h2-size); line-height: var(--se-h2-lh); font-weight: 600; }
.se-h3 { font-family: var(--se-font-display); font-size: var(--se-h3-size); line-height: var(--se-h3-lh); font-weight: 600; }
.se-body1 { font-family: var(--se-font-body); font-size: var(--se-body1-size); line-height: var(--se-body1-lh); font-weight: 700; }
.se-body2 { font-family: var(--se-font-body); font-size: var(--se-body2-size); line-height: var(--se-body2-lh); font-weight: 400; }
.se-body3 { font-family: var(--se-font-body); font-size: var(--se-body3-size); line-height: var(--se-body3-lh); font-weight: 700; }
.se-eyebrow {
  font-family: var(--se-font-data);
  font-size: var(--se-eyebrow-size);
  line-height: var(--se-eyebrow-lh);
  font-weight: 300;
  text-transform: lowercase; /* GC Arbiter Demo is lowercase only */
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Gradient backgrounds. MANDATORY: pair with .se-grain or .se-grain-svg.
   -------------------------------------------------------------------------- */
.se-bg-gradient-1  { background-image: var(--se-gradient-1); }
.se-bg-gradient-2  { background-image: var(--se-gradient-2); }
.se-bg-gradient-3  { background-image: var(--se-gradient-3); }
.se-bg-gradient-4  { background-image: var(--se-gradient-4); }
.se-bg-gradient-5  { background-image: var(--se-gradient-5); }
.se-bg-gradient-6  { background-image: var(--se-gradient-6); }
.se-bg-gradient-7  { background-image: var(--se-gradient-7); }
.se-bg-gradient-8  { background-image: var(--se-gradient-8); }
.se-bg-gradient-9  { background-image: var(--se-gradient-9); }
.se-bg-gradient-10 { background-image: var(--se-gradient-10); }

/* --------------------------------------------------------------------------
   Brand grain. Spec (guidelines "Noise Effects"): official noise texture
   layered over the gradient, blend mode Overlay, opacity strictly 20%.
   .se-grain uses a 1024px tile cropped from the official noise.png.
   .se-grain-svg is a zero-asset procedural equivalent (feTurbulence tuned to
   the Photoshop recipe: Add Noise 5%, Gaussian, Monochromatic) for contexts
   where the tile is unavailable. Prefer .se-grain.
   -------------------------------------------------------------------------- */
.se-grain, .se-grain-svg { position: relative; }
.se-grain::after,
.se-grain-svg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;              /* strictly 20% */
  mix-blend-mode: overlay;   /* blend mode Overlay */
  pointer-events: none;
}
.se-grain::after {
  background-image: url('../assets/noise/noise-tile.png');
  background-repeat: repeat;
}
.se-grain-svg::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* --------------------------------------------------------------------------
   Reduced motion: freeze decorative animation, keep content visible.
   Every motion study must remain a legible static lockup under this query.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .se-animate, .se-animate * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}