/* =========================================================================
   Matrix Renewables — Colors & Type Foundations
   ========================================================================= */

/* --- Fonts ---------------------------------------------------------------
   Matrix brand typography:
     • Titles / display: OPTIKA
     • Any non-title text: OPEN SANS LIGHT (300)
   ------------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

@font-face {
  font-family: 'Optika';
  src: url('fonts/Optika-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Optika';
  src: url('fonts/Optika-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Optika';
  src: url('fonts/Optika-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Optika';
  src: url('fonts/Optika-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Optika';
  src: url('fonts/Optika-Black.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ----- Brand Primitive Colors --------------------------------------- */
  /* Sampled directly from logo. The mark is a cluster of rounded squares
     that graduate from a deeper blue (left) to a bright cyan (right). */
  --matrix-blue-deep:    #0082C8;   /* leftmost dot, deep marine blue */
  --matrix-blue:         #0A8CC8;   /* primary mid-tone */
  --matrix-cyan:         #32BEC8;   /* "RENEWABLES" wordmark teal */
  --matrix-cyan-light:   #7FD6DC;   /* lighter tint, for surfaces */
  --matrix-ink:          #000000;   /* wordmark black */

  /* Gradient used in mark — keep the stops honest */
  --matrix-gradient: linear-gradient(90deg, #0082C8 0%, #0A8CC8 35%, #14A0C8 65%, #32BEC8 100%);
  --matrix-gradient-diag: linear-gradient(135deg, #0082C8 0%, #32BEC8 100%);

  /* ----- Neutral Scale ------------------------------------------------- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F9FB;
  --neutral-100:  #EEF2F5;
  --neutral-200:  #DCE3E9;
  --neutral-300:  #BFC8D1;
  --neutral-400:  #8D98A3;
  --neutral-500:  #5F6B77;
  --neutral-600:  #40495A;         /* body fg on light */
  --neutral-700:  #2A3240;
  --neutral-800:  #171C27;
  --neutral-900:  #0B0F18;

  /* ----- Country Accent Colors (critical for regional materials) ----- */
  --country-chile:    #10229E;     /* deep blue */
  --country-italy:    #E242A7;     /* magenta */
  --country-spain:    #118DFF;     /* bright blue */
  --country-us:       #E56C36;     /* burnt orange */
  --country-uk:       #E5C852;     /* golden yellow */

  /* ----- Semantic Tokens ---------------------------------------------- */
  --bg-page:       var(--neutral-0);
  --bg-subtle:     var(--neutral-50);
  --bg-sunken:     var(--neutral-100);
  --bg-elevated:   var(--neutral-0);
  --bg-inverse:    var(--neutral-900);

  --fg-primary:    var(--neutral-900);
  --fg-secondary:  var(--neutral-600);
  --fg-muted:      var(--neutral-400);
  --fg-on-brand:   var(--neutral-0);
  --fg-on-inverse: var(--neutral-0);
  --fg-link:       var(--matrix-blue);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-600);

  --accent-primary:   var(--matrix-blue);
  --accent-secondary: var(--matrix-cyan);
  --accent-emphasis:  var(--matrix-blue-deep);

  /* Functional */
  --success: #1FA971;
  --warning: #E5A022;
  --danger:  #D44646;
  --info:    var(--matrix-blue);

  /* ----- Typography --------------------------------------------------- */
  /* Optika for titles. Open Sans Light (300) for any non-title text. */
  --font-display: 'Optika', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --fw-body-default: 300;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* Type scale — editorial, not tech-startup bouncy */
  --fs-display-xl: 88px;   /* hero, slide titles */
  --fs-display-l:  64px;
  --fs-display-m:  48px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;

  /* Line heights */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.55;
  --lh-tight:   1.3;

  /* Letter-spacing — display is tracked WIDE, like the wordmark */
  --tracking-display:  0.02em;
  --tracking-wide:     0.08em;   /* eyebrow / ALLCAPS labels */
  --tracking-wider:    0.14em;   /* brand wordmark style */
  --tracking-normal:   0em;
  --tracking-tight:    -0.01em;

  /* ----- Spacing Scale (4px base) ------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ----- Radii -------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ----- Elevation (low, corporate — not playful) -------------------- */
  --shadow-xs: 0 1px 2px rgba(11, 15, 24, 0.04);
  --shadow-sm: 0 1px 3px rgba(11, 15, 24, 0.06), 0 1px 2px rgba(11, 15, 24, 0.04);
  --shadow-md: 0 4px 10px rgba(11, 15, 24, 0.06), 0 2px 4px rgba(11, 15, 24, 0.04);
  --shadow-lg: 0 12px 28px rgba(11, 15, 24, 0.10), 0 4px 8px rgba(11, 15, 24, 0.05);
  --shadow-brand: 0 12px 32px rgba(10, 140, 200, 0.25);

  /* ----- Motion ------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:      150ms;
  --dur-base:      220ms;
  --dur-slow:      360ms;
}

/* =========================================================================
   Semantic type classes
   ========================================================================= */
/* Global default: body font at Light everywhere that isn't a heading/title. */
html, body { font-family: var(--font-body); font-weight: 300; }

.mx-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-primary);
}
.mx-display-xl,
.mx-display-l,
.mx-display-m,
h1.mx, h2.mx, h3.mx, h4.mx {
  font-family: var(--font-display);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-display);
}
.mx-display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-bold);     line-height: var(--lh-display); letter-spacing: var(--tracking-tight); }
.mx-display-l  { font-size: var(--fs-display-l);  font-weight: var(--fw-bold);     line-height: var(--lh-display); letter-spacing: var(--tracking-tight); }
.mx-display-m  { font-size: var(--fs-display-m);  font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); }
h1.mx          { font-size: var(--fs-h1);         font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
h2.mx          { font-size: var(--fs-h2);         font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
h3.mx          { font-size: var(--fs-h3);         font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
h4.mx          { font-size: var(--fs-h4);         font-weight: var(--fw-medium);   line-height: var(--lh-tight);   }

.mx-wordmark {
  /* Emulates the brand lockup tracking on "RENEWABLES" */
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

p.mx, .mx-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;           /* Open Sans Light, per brand */
  line-height: var(--lh-body);
  color: var(--fg-secondary);
}
.mx-body-lg { font-size: var(--fs-body-lg); }
.mx-body-sm { font-size: var(--fs-body-sm); }
.mx-caption { font-size: var(--fs-caption); color: var(--fg-muted); letter-spacing: var(--tracking-wide); }
code.mx, .mx-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
}

/* Figure labels used for big stats (e.g. "4.3 GW") */
.mx-stat {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--accent-primary);
}
.mx-stat-label {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}