/* ==========================================================================
   IYRO SOLAR — DESIGN TOKENS
   The single source of truth for every visual value on the site.
   Nothing below this file should ever hard-code a colour, size or duration.

   1.  Colour ....... primary / secondary / neutral / semantic
   2.  Surfaces ..... background, border, card, overlay
   3.  Text ......... foreground roles
   4.  Typography ... families, scale, weights, line-heights, tracking
   5.  Spacing ...... 8-point scale
   6.  Radius
   7.  Elevation .... shadows + focus ring
   8.  Motion ....... duration + easing
   9.  Opacity
   10. Layout ....... container, gutter, breakpoints
   11. Z-index
   12. Component ....	buttons, forms, header, cards, tables
   13. Bootstrap bridge — maps tokens onto Bootstrap 5.3 CSS variables
   14. Base / reset
   15. Typography classes + utilities
   ========================================================================== */

:root {

  /* == 1. COLOUR ========================================================= */

  /* Primary — brand blue. Structure, trust, navigation, primary actions.   */
  --primary-50:  #F4F7FB;
  --primary-100: #E6EEF7;
  --primary-200: #C6D7EB;
  --primary-300: #A3BFE0;
  --primary-400: #6E97C5;
  --primary-500: #32568A;   /* brand */
  --primary-600: #294874;
  --primary-700: #20385B;
  --primary-800: #182942;
  --primary-900: #111D2F;
  --primary:     var(--primary-500);
  --primary-rgb: 50, 86, 138;

  /* Secondary — brand amber. Accents, emphasis, secondary CTA only.
     Never used as text on white: fails contrast. Use --accent-text.        */
  --secondary-50:  #FFF9EE;
  --secondary-100: #FFF2DB;
  --secondary-200: #FFE4B5;
  --secondary-300: #FFD087;
  --secondary-400: #FDBF5A;
  --secondary-500: #FBAF3A;  /* brand */
  --secondary-600: #E09515;
  --secondary-700: #B87710;
  --secondary-800: #8A590C;
  --secondary-900: #5E3D08;
  --secondary:     var(--secondary-500);
  --secondary-rgb: 251, 175, 58;

  /* Neutral — never pure black. #1A1A1A is the darkest ink.                */
  --gray-50:  #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #ECECEC;
  --gray-300: #DDDDDD;
  --gray-400: #B5B5B5;
  --gray-500: #8C8C8C;
  --gray-600: #666666;
  --gray-700: #444444;
  --gray-800: #2C2C2C;
  --gray-900: #1A1A1A;
  --white:    #FFFFFF;

  /* Semantic */
  --success:      #16A34A;
  --success-soft: #ECFDF3;
  --warning:      #F59E0B;
  --warning-soft: #FFFAEB;
  --danger:       #DC2626;    /* fills, borders, icons — 3:1 non-text only   */
  --danger-soft:  #FEF2F2;
  /* --danger is a UI red, not a text red: 4.37:1 on white, which misses AA for
     anything under 18.66px. These two are the text-safe ends of the same ramp. */
  --danger-ink:    #B91C1C;   /* 6.5:1 on white — small red text             */
  --danger-on-dark:#F87171;   /* 5.5:1 on the dark form panel                */
  --info:         #2563EB;
  --info-soft:    #EFF6FF;

  /* == 2. SURFACES ======================================================= */
  --bg:            var(--white);
  --bg-alt:        var(--gray-50);      /* alternating section band        */
  --bg-tint:       var(--primary-50);   /* brand-tinted band               */
  --bg-invert:     var(--primary-800);  /* dark section                    */
  --bg-invert-2:   var(--primary-900);  /* deepest section / footer        */
  --surface:       var(--white);
  --surface-2:     var(--gray-100);
  --card:          var(--white);
  --card-invert:   rgba(255, 255, 255, .06);
  --border:        var(--gray-300);
  --border-soft:   var(--gray-200);
  --border-strong: var(--gray-400);
  --border-invert: rgba(255, 255, 255, .14);
  --overlay:       rgba(17, 29, 47, .62);

  /* == 3. TEXT =========================================================== */
  --text:          var(--gray-900);
  --text-body:     var(--gray-700);
  --text-muted:    var(--gray-600);   /* 5.7:1 on white — AA body text     */
  --text-subtle:   var(--gray-500);   /* 3.5:1 — large / non-essential only */
  --text-disabled: var(--gray-400);
  --text-invert:   var(--white);
  --text-invert-muted: rgba(255, 255, 255, .72);
  --text-link:     var(--primary-600);
  --text-heading:  var(--primary-900);
  --accent-text:   var(--secondary-800); /* 6.3:1 on white — safe amber ink */

  /* == 4. TYPOGRAPHY ===================================================== */
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Consolas", monospace;

  /* Fluid scale — min value is the mobile size, max the desktop size.
     Never shrinks below a readable floor; never overshoots on 4K.          */
  --fs-h1:        clamp(2rem,    1.35rem + 2.6vw, 3rem);      /* 32 → 48 */
  --fs-h2:        clamp(1.75rem, 1.30rem + 1.8vw, 2.5rem);    /* 28 → 40 */
  --fs-h3:        clamp(1.5rem,  1.25rem + 1.0vw, 2rem);      /* 24 → 32 */
  --fs-h4:        clamp(1.25rem, 1.10rem + 0.6vw, 1.75rem);   /* 20 → 28 */
  --fs-h5:        clamp(1.15rem, 1.06rem + 0.4vw, 1.5rem);    /* 18 → 24 */
  --fs-h6:        1.25rem;                                    /* 20      */
  --fs-subtitle:  clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);    /* 17 → 20 */
  --fs-lg:        1.125rem;   /* 18 — default body               */
  --fs-md:        1rem;       /* 16 — dense body, tables         */
  --fs-sm:        0.9375rem;  /* 15 — small text                 */
  --fs-caption:   0.8125rem;  /* 13 — captions, meta             */
  --fs-label:     0.875rem;   /* 14 — form labels                */
  --fs-button:    1rem;       /* 16 */
  --fs-nav:       0.9375rem;  /* 15 */
  --fs-eyebrow:   0.8125rem;  /* 13 */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.15;   /* display headings   */
  --lh-snug:    1.3;    /* h3–h6              */
  --lh-normal:  1.5;    /* UI text, tables    */
  --lh-relaxed: 1.7;    /* body copy          */
  --lh-loose:   1.8;    /* long-form article  */

  --ls-tight:  -0.02em;  /* h1/h2               */
  --ls-snug:   -0.01em;  /* h3/h4               */
  --ls-normal: 0;
  --ls-wide:   0.04em;   /* buttons, labels     */
  --ls-wider:  0.12em;   /* eyebrows, overlines */

  /* == 5. SPACING — 8-point scale ======================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;
  --space-13: 160px;

  /* Section rhythm */
  --section-y:    var(--space-11);  /* 96 — default vertical padding */
  --section-y-sm: var(--space-9);   /* 64 — compact bands            */
  --section-y-xs: var(--space-7);   /* 40 — strips                   */
  --stack:        var(--space-5);   /* default gap between siblings  */

  /* == 6. RADIUS — industrial, never pill-shaped surfaces ================ */
  --radius-xs:   4px;
  --radius-sm:   6px;   /* buttons, inputs  */
  --radius-md:   10px;  /* cards            */
  --radius-lg:   14px;  /* modals           */
  --radius-pill: 999px; /* chips, badges    */

  /* == 7. ELEVATION ====================================================== */
  --shadow-xs: 0 1px 2px rgba(17, 29, 47, .06), 0 2px 8px rgba(17, 29, 47, .04);
  --shadow-sm: 0 2px 6px rgba(17, 29, 47, .06), 0 6px 18px rgba(17, 29, 47, .06);
  --shadow-md: 0 4px 12px rgba(17, 29, 47, .07), 0 12px 30px rgba(17, 29, 47, .08);
  --shadow-lg: 0 8px 20px rgba(17, 29, 47, .08), 0 18px 60px rgba(17, 29, 47, .12);
  --shadow-focus: 0 0 0 3px rgba(var(--primary-rgb), .30);
  --shadow-focus-invert: 0 0 0 3px rgba(var(--secondary-rgb), .55);

  /* == 8. MOTION ========================================================= */
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 300ms;   /* hard ceiling — nothing on this site animates longer */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(0, 0, .2, 1);
  --transition: var(--t-base) var(--ease);

  /* == 9. OPACITY ======================================================== */
  --opacity-disabled: .45;
  --opacity-muted:    .70;
  --opacity-hover:    .85;
  --opacity-overlay:  .62;

  /* == 10. LAYOUT ======================================================== */
  --container:       1320px;
  --container-wide:  1440px;
  --container-text:  760px;   /* max measure for long-form reading */
  --gutter:          24px;
  --page-x:          20px;    /* min edge padding on mobile */
  /* Breakpoints are documented here; media queries must use the literals
     because CSS variables are not allowed inside @media conditions.
     sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400                          */

  /* == 11. Z-INDEX ======================================================= */
  --z-base:      1;
  --z-raised:    10;
  --z-sticky:    100;
  --z-header:    200;
  --z-mega:      210;
  --z-backdrop:  300;
  --z-offcanvas: 400;
  --z-modal:     500;
  --z-toast:     600;
  --z-tooltip:   700;

  /* == 12. COMPONENT TOKENS ============================================== */
  --btn-h-sm:  40px;
  --btn-h-md:  48px;
  --btn-h-lg:  56px;
  --btn-px-sm: var(--space-4);
  --btn-px-md: var(--space-5);
  --btn-px-lg: var(--space-6);

  --input-h:      52px;
  --input-px:     var(--space-4);
  --input-border: var(--border);

  --tap-min:      44px;   /* WCAG 2.5.8 minimum touch target */

  --topbar-h:     40px;
  --header-h:     76px;
  --header-h-sm:  64px;
  --action-bar-h: 58px;   /* fixed mobile action bar; anything pinned to the
                             bottom of the viewport must clear this */

  --card-p:       var(--space-6);   /* 32 */
  --card-p-sm:    var(--space-5);   /* 24 */
  --card-lift:    -6px;

  --table-head-bg: var(--gray-100);
  --table-row-hover: var(--primary-50);

  /* == 13. BOOTSTRAP 5.3 BRIDGE ========================================== */
  /* Point Bootstrap's own variables at our tokens so grid, buttons, forms
     and utilities inherit the design system without recompiling SCSS.      */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size:   var(--fs-lg);
  --bs-body-line-height: var(--lh-relaxed);
  --bs-body-color:       var(--text-body);
  --bs-body-bg:          var(--bg);
  --bs-heading-color:    var(--text-heading);
  --bs-emphasis-color:   var(--text);
  --bs-secondary-color:  var(--text-muted);
  --bs-border-color:     var(--border);
  --bs-border-radius:    var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-primary:          var(--primary-500);
  --bs-primary-rgb:      var(--primary-rgb);
  --bs-link-color:       var(--text-link);
  --bs-link-color-rgb:   var(--primary-rgb);
  --bs-link-hover-color: var(--primary-700);
  --bs-gutter-x:         var(--gutter);
  --bs-font-sans-serif:  var(--font-body);
  /* Bootstrap ships #d63384 for <code>. At 13px that is 4.11:1 on a tinted
     panel and 4.6:1 on plain white — it fails AA the moment a code span sits
     on anything other than pure white, which is exactly where notices put it. */
  --bs-code-color:       var(--danger-ink);
}


/* ==========================================================================
   14. BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* `clip` where supported: unlike `hidden` it does not create a scroll
   container, so it cannot break position:sticky on the header. */
@supports (overflow-x: clip) { body { overflow-x: clip; } }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  color: var(--text-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold);     line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);     line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

p { margin: 0 0 var(--space-4); }
/* Wrapped in :where() so this reset carries no specificity. It is meant for
   plain prose; without :where() it is (0,1,1) and silently beats any
   component class applied to a <p> — which produced two separate
   "why has my margin vanished" bugs before this was tightened. Any class on
   a paragraph now wins, which is the behaviour a reset should have. */
p:where(:last-child) { margin-bottom: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--primary-700); text-decoration: underline; }

/* Media never causes layout shift: always reserve the box. */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
img { border-style: none; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li { margin-bottom: var(--space-2); }

hr {
  height: 1px;
  margin: var(--space-6) 0;
  border: 0;
  background: var(--border-soft);
  opacity: 1;
}

strong, b { font-weight: var(--fw-semibold); color: var(--text); }
small { font-size: var(--fs-sm); }

/* --- Focus: always visible, never removed ------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--primary-400);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.on-dark :focus-visible,
.is-dark :focus-visible { outline-color: var(--secondary-400); }

::selection { background: var(--primary-100); color: var(--primary-900); }

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-tooltip);
  padding: var(--space-3) var(--space-5);
  background: var(--primary-600);
  color: var(--white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: var(--fw-semibold);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0; color: var(--white); text-decoration: none; }

.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; }


/* ==========================================================================
   15. TYPOGRAPHY CLASSES + UTILITIES
   ========================================================================== */

.t-h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-heading); letter-spacing: var(--ls-tight); }
.t-h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-tight) var(--font-heading); letter-spacing: var(--ls-tight); }
.t-h3 { font: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-heading); }
.t-h4 { font: var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-heading); }
.t-h5 { font: var(--fw-semibold) var(--fs-h5)/var(--lh-snug) var(--font-heading); }
.t-h6 { font: var(--fw-semibold) var(--fs-h6)/var(--lh-snug) var(--font-heading); }

.t-subtitle { font-size: var(--fs-subtitle); line-height: var(--lh-relaxed); color: var(--text-muted); }
.t-body-lg  { font-size: var(--fs-lg); line-height: var(--lh-relaxed); }
.t-body     { font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.t-body-sm  { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.t-caption  { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--text-muted); }
.on-dark .t-caption { color: rgba(255, 255, 255, .58); }

.t-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--text);
}

/* Overline used at the top of every section — the "eyebrow" in the rhythm. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--secondary-500);
}
.eyebrow--center { justify-content: center; }
.on-dark .eyebrow { color: var(--secondary-400); }

/* Numeric display — statistics, spec values. Tabular so columns align. */
.t-stat {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Colour utilities */
.text-ink      { color: var(--text) !important; }
.text-body-c   { color: var(--text-body) !important; }
.text-muted-c  { color: var(--text-muted) !important; }
.text-brand    { color: var(--primary-600) !important; }
.text-accent   { color: var(--accent-text) !important; }
.text-invert   { color: var(--text-invert) !important; }
.on-dark, .on-dark p, .on-dark li { color: var(--text-invert-muted); }
.on-dark h1, .on-dark h2, .on-dark h3,
.on-dark h4, .on-dark h5, .on-dark h6 { color: var(--white); }
.on-dark a { color: var(--secondary-300); }
.on-dark a:hover { color: var(--secondary-200); }

/* Measure control — stops long paragraphs running to 1320px. */
.measure    { max-width: var(--container-text); }
.measure-sm { max-width: 56ch; }

/* Reveal-on-scroll. Only engages when JS is present so a failed script can
   never leave the page blank. Disabled entirely for reduced-motion users. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.has-js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}