/* ============================================================
   Geneltec Design System — colors_and_type.css
   ------------------------------------------------------------
   Smart-technology / electrical engineering brand.
   Premium • Technical • Modern • Real.
   ============================================================ */

/* -------------- Fonts ----------------------------------------
   Display & body: Inter Tight  (closest match to the modern
   geometric humanist in the wordmark — "Geneltec" looks like
   a slightly condensed sans, Inter Tight is the closest free
   substitute available on Google Fonts).
   Mono / technical labels: JetBrains Mono.
   FLAG: confirm the original wordmark typeface with the user.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR TOKENS — raw palette
     ============================================================ */

  /* Brand cyan-blue, sampled directly from the wordmark (#1AB6DE / #21B2E1).
     We anchor the system on a single saturated cyan-blue; everything else
     is white + a cool neutral grey scale. */
  --brand-500:        #1AB6E0;   /* primary — wordmark blue */
  --brand-600:        #119FC8;   /* hover / pressed */
  --brand-700:        #0E83A6;   /* deep — focus rings, dense fills */
  --brand-400:        #4CC6E6;   /* light — chips, highlights */
  --brand-300:        #8FDCEF;   /* tint — backgrounds */
  --brand-100:        #E2F6FC;   /* wash — section tints */
  --brand-50:         #F4FBFD;   /* faint wash */

  /* Deep navy — used for headings, footer, dense industrial UI panels.
     Cooler than pure black; never warm. */
  --ink-900:          #0B1B26;   /* near-black, technical */
  --ink-800:          #122533;
  --ink-700:          #1B3242;
  --ink-600:          #2A4458;

  /* Neutrals — cool grey scale (slightly cyan-tinted to harmonise) */
  --neutral-950:      #0B1118;
  --neutral-900:      #0F1722;
  --neutral-800:      #1A2330;
  --neutral-700:      #2B3645;
  --neutral-600:      #475667;
  --neutral-500:      #677586;
  --neutral-400:      #8E9AAA;
  --neutral-300:      #B6BFCB;
  --neutral-200:      #D6DCE4;
  --neutral-150:      #E4E8EE;
  --neutral-100:      #EEF1F5;
  --neutral-50:       #F6F8FB;
  --neutral-0:        #FFFFFF;

  /* Semantic accents — used sparingly for status only */
  --status-ok:        #16A571;
  --status-warn:      #E89B1A;
  --status-error:     #D7443E;
  --status-info:      var(--brand-500);

  /* ============================================================
     SEMANTIC TOKENS — use these in components, not raw palette
     ============================================================ */

  /* Surfaces */
  --bg:               var(--neutral-0);          /* page */
  --bg-subtle:        var(--neutral-50);          /* alt section */
  --bg-muted:         var(--neutral-100);         /* cards-on-grey */
  --bg-tint:          var(--brand-50);            /* brand wash */
  --bg-inverse:       var(--ink-900);             /* dark sections, footer */
  --bg-inverse-2:     var(--ink-800);

  /* Foreground / text */
  --fg:               var(--ink-900);             /* primary text */
  --fg-2:             var(--neutral-600);         /* secondary / body */
  --fg-3:             var(--neutral-500);         /* tertiary / captions */
  --fg-4:             var(--neutral-400);         /* hint / meta */
  --fg-inverse:       var(--neutral-0);           /* on dark surfaces */
  --fg-inverse-2:     var(--neutral-300);         /* secondary on dark */
  --fg-brand:         var(--brand-500);           /* brand text accents */

  /* Borders / hairlines */
  --border:           var(--neutral-150);
  --border-strong:    var(--neutral-200);
  --border-inverse:   rgba(255,255,255,0.10);
  --border-brand:     var(--brand-500);

  /* Focus */
  --focus-ring:       0 0 0 3px rgba(26, 182, 224, 0.30);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:        'Inter Tight', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display:     var(--font-sans);

  /* Type scale (desktop). Mobile collapses via clamp on h1/h2. */
  --t-display:        clamp(48px, 6.4vw, 84px);
  --t-h1:             clamp(40px, 4.6vw, 64px);
  --t-h2:             clamp(30px, 3.0vw, 44px);
  --t-h3:             24px;
  --t-h4:             20px;
  --t-lead:           20px;
  --t-body:           16px;
  --t-small:          14px;
  --t-caption:        13px;
  --t-eyebrow:        12px;   /* uppercase technical label */
  --t-mono:           13px;

  --lh-tight:         1.05;
  --lh-snug:          1.20;
  --lh-normal:        1.45;
  --lh-relaxed:       1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.16em;   /* SMART TECHNOLOGY-style spacing */
  --tracking-wider:   0.08em;

  /* ============================================================
     SPACING — 4px grid
     ============================================================ */
  --s-1: 4px;   --s-2: 8px;    --s-3: 12px;   --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;   --s-8: 32px;   --s-10: 40px;
  --s-12: 48px; --s-16: 64px;  --s-20: 80px;  --s-24: 96px;
  --s-32: 128px;
  --section-y: clamp(72px, 9vw, 128px);
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ============================================================
     RADII — restrained; technical, not bubbly
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — soft, cool, single direction (light from above)
     ============================================================ */
  --shadow-xs:  0 1px 2px rgba(11, 27, 38, 0.05);
  --shadow-sm:  0 2px 6px rgba(11, 27, 38, 0.06), 0 1px 2px rgba(11, 27, 38, 0.04);
  --shadow-md:  0 6px 16px rgba(11, 27, 38, 0.08), 0 2px 4px rgba(11, 27, 38, 0.04);
  --shadow-lg:  0 18px 40px rgba(11, 27, 38, 0.10), 0 4px 10px rgba(11, 27, 38, 0.05);
  --shadow-xl:  0 32px 64px rgba(11, 27, 38, 0.14), 0 8px 18px rgba(11, 27, 38, 0.06);
  --shadow-brand: 0 12px 32px rgba(26, 182, 224, 0.28);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.16, 1, 0.30, 1);  /* primary */
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   160ms;
  --dur-base:   280ms;
  --dur-slow:   600ms;
  --dur-scroll: 1200ms;   /* GSAP scroll reveals */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use these classes (or apply directly) instead of hard-coding.
   ============================================================ */
.h-display, .display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}
.h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}
.lead {
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.body, p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.small {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.caption {
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}
.eyebrow--ink { color: var(--fg); }
.eyebrow--muted { color: var(--fg-3); }
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0;
  color: var(--fg-2);
}

/* Brand-accent inline mark */
.brand { color: var(--fg-brand); }

/* Selection */
::selection { background: var(--brand-500); color: #fff; }