/* ============================================================================
   ZHEL USTAUSHYLAR — Design Tokens : Color + Type
   Part of the A.ECO group of companies (renewable energy, CIS).
   Palette bridges the red+blue Zhel logo with A.ECO's heritage energy hues.
   Load this first, then build on the semantic vars.
   ============================================================================ */

/* ---- Fonts -----------------------------------------------------------------
   Montserrat = A.ECO group standard (mandated by the parent brand guide).
   We use it for both display (heavy weights) and body. IBM Plex Mono carries
   the "precise measurement" character for data, coordinates and readouts.
   Loaded from Google Fonts CDN — see README "Font substitution" note.        */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ====================== BRAND CORE ====================== */
  /* Zhel Blue — primary. Sampled from the wordmark (#1B6FAB). */
  --blue-50:  #EEF5FB;
  --blue-100: #D3E5F2;
  --blue-200: #A6CCE4;
  --blue-300: #6FAAD0;
  --blue-400: #3D88BC;
  --blue-500: #1B6FAB;   /* base — Zhel Blue */
  --blue-600: #155A8C;
  --blue-700: #114A73;
  --blue-800: #0E3A5A;
  --blue-900: #0A2A42;

  /* Zhel Red — energy accent. Sampled from the windsock (#BA0000). */
  --red-50:  #FBEAEA;
  --red-100: #F4C7C7;
  --red-200: #E88F8F;
  --red-300: #DB5B5B;
  --red-400: #CB2E2E;
  --red-500: #BA0000;    /* base — Zhel Red */
  --red-600: #9C0000;
  --red-700: #7D0000;
  --red-800: #5E0000;

  /* A.ECO Navy — deep brand ink / dark surfaces (#012665). */
  --navy-400: #0A3A8A;
  --navy-500: #012665;   /* base — A.ECO deep navy */
  --navy-600: #011E50;
  --navy-700: #01163B;
  --navy-800: #010F29;

  /* ====================== NEUTRALS (cool slate) ====================== */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F8FA;
  --neutral-100: #ECEFF3;
  --neutral-200: #DCE2E8;
  --neutral-300: #C2CBD4;
  --neutral-400: #97A3AF;
  --neutral-500: #6B7783;
  --neutral-600: #4C5763;
  --neutral-700: #353E48;
  --neutral-800: #232A31;
  --neutral-900: #141A1F;

  /* ====================== ENERGY / DATA-VIZ (A.ECO heritage) ======== */
  /* Use these to distinguish WIND vs SOLAR and for charts. */
  --wind:       #1B6FAB;   /* wind = brand blue */
  --wind-light: #2BA5C9;   /* cyan accent for wind data */
  --solar:      #FFB000;   /* solar = amber (A.ECO) */
  --solar-deep: #F26103;   /* solar orange (A.ECO) */
  --sage:       #A3B8A2;   /* A.ECO sage — secondary/landscape */
  --sand:       #D9C18C;   /* A.ECO sand — warm neutral accent */

  /* ====================== SEMANTIC : surfaces & text =============== */
  --bg-page:      var(--neutral-50);
  --bg-surface:   var(--neutral-0);
  --bg-subtle:    var(--neutral-100);
  --bg-inverse:   var(--navy-500);    /* deep navy panels/footers */

  --fg-1: var(--neutral-900);   /* primary text */
  --fg-2: var(--neutral-600);   /* secondary text */
  --fg-3: var(--neutral-400);   /* tertiary / captions */
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  rgba(255,255,255,0.72);
  --fg-brand:      var(--blue-500);
  --fg-link:       var(--blue-600);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-on-dark: rgba(255,255,255,0.16);

  /* ====================== SEMANTIC : status ======================= */
  --success:    #1B8A5A;
  --success-bg: #E6F4EC;
  --warning:    #E6A000;
  --warning-bg: #FCF3DC;
  --danger:     #C62828;
  --danger-bg:  #FBEAEA;
  --info:       var(--blue-500);
  --info-bg:    var(--blue-50);

  /* ====================== RADII ======================= */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ====================== SPACING (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;

  /* ====================== ELEVATION / SHADOWS ============
     Cool, navy-tinted shadows — soft and technical, never heavy. */
  --shadow-xs: 0 1px 2px rgba(1,38,101,0.06);
  --shadow-sm: 0 1px 3px rgba(1,38,101,0.08), 0 1px 2px rgba(1,38,101,0.06);
  --shadow-md: 0 4px 12px rgba(1,38,101,0.10), 0 2px 4px rgba(1,38,101,0.06);
  --shadow-lg: 0 12px 28px rgba(1,38,101,0.14), 0 4px 8px rgba(1,38,101,0.08);
  --shadow-focus: 0 0 0 3px rgba(27,111,171,0.30);

  /* ====================== TYPE : families =============== */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ====================== TYPE : weights ================ */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-extra:   800;
  --w-black:   900;

  /* ====================== TYPE : scale ==================
     Display weights are heavy + tight to echo the wordmark. */
  --display-1-size: 64px; --display-1-lh: 1.02; --display-1-ls: -0.02em; --display-1-weight: 900;
  --display-2-size: 48px; --display-2-lh: 1.05; --display-2-ls: -0.02em; --display-2-weight: 800;
  --h1-size: 36px; --h1-lh: 1.12; --h1-ls: -0.01em; --h1-weight: 800;
  --h2-size: 28px; --h2-lh: 1.18; --h2-ls: -0.01em; --h2-weight: 700;
  --h3-size: 22px; --h3-lh: 1.25; --h3-ls: 0;       --h3-weight: 700;
  --h4-size: 18px; --h4-lh: 1.3;  --h4-ls: 0;       --h4-weight: 600;
  --body-lg-size: 18px; --body-lg-lh: 1.55;
  --body-size:    16px; --body-lh:    1.6;
  --body-sm-size: 14px; --body-sm-lh: 1.55;
  --caption-size: 12px; --caption-lh: 1.4;
  /* Eyebrow / label: letter-spaced uppercase — echoes the logo tagline. */
  --eyebrow-size: 12px; --eyebrow-ls: 0.18em; --eyebrow-weight: 700;
  --data-size:    14px; /* mono readouts */
}

/* ============================================================================
   SEMANTIC TYPE CLASSES — apply directly, or copy the rules.
   ============================================================================ */
.zh-display-1 { font-family: var(--font-display); font-weight: var(--display-1-weight); font-size: var(--display-1-size); line-height: var(--display-1-lh); letter-spacing: var(--display-1-ls); color: var(--fg-1); }
.zh-display-2 { font-family: var(--font-display); font-weight: var(--display-2-weight); font-size: var(--display-2-size); line-height: var(--display-2-lh); letter-spacing: var(--display-2-ls); color: var(--fg-1); }
.zh-h1 { font-family: var(--font-display); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); color: var(--fg-1); }
.zh-h2 { font-family: var(--font-display); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); color: var(--fg-1); }
.zh-h3 { font-family: var(--font-display); font-weight: var(--h3-weight); font-size: var(--h3-size); line-height: var(--h3-lh); color: var(--fg-1); }
.zh-h4 { font-family: var(--font-display); font-weight: var(--h4-weight); font-size: var(--h4-size); line-height: var(--h4-lh); color: var(--fg-1); }
.zh-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--body-lg-size); line-height: var(--body-lg-lh); color: var(--fg-1); }
.zh-body    { font-family: var(--font-body); font-weight: 400; font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg-1); }
.zh-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--fg-2); }
.zh-caption { font-family: var(--font-body); font-weight: 500; font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--fg-3); }
.zh-eyebrow { font-family: var(--font-display); font-weight: var(--eyebrow-weight); font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--fg-brand); }
.zh-data    { font-family: var(--font-mono); font-weight: 500; font-size: var(--data-size); letter-spacing: 0; color: var(--fg-1); font-variant-numeric: tabular-nums; }