@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Colour palette (TECH-JCORP brand) ─────── */
  --black:          #1A1C1B;
  --black-canvas:   #1A1C1B;
  --surface-layer:  #232625;
  --surface-cta:    #0f2a12;
  --white:          #FFFFFF;
  --green:          #39FF14;
  --green-dim:      #2ecc10;
  --green-rgb:      57, 255, 20;
  --green-glow:     rgba(57, 255, 20, 0.18);
  --silver:         #C0C0C0;
  --grey-1:         #222524;
  --grey-2:         #2e3130;
  --grey-text:      #C0C0C0;
  --placeholder:    #6e7371;
  --overlay-dark:   rgba(26, 28, 27, 0.78);
  --overlay-light:  rgba(26, 28, 27, 0.42);
  --nav-bg:         rgba(26, 28, 27, 0.94);
  --slate-200:      #e2e8f0;
  --slate-400:      #94a3b8;

  /* ── Aliases ─────────────────────────────────── */
  --color-bg:           var(--black-canvas);
  --color-text:         var(--white);
  --color-text-muted:   var(--grey-text);
  --color-accent:       var(--green);
  --color-accent-muted: var(--green-dim);
  --color-accent-glow:  var(--green-glow);
  --color-card:         var(--surface-layer);
  --color-border:       var(--grey-2);
  --color-nav:          var(--nav-bg);

  /* ── Typography (IBM Plex Serif for Headings) ── */
  --font-body:    'Inter', sans-serif;
  --font-mono:    "Courier Prime", Courier, monospace;
  --font-heading: "IBM Plex Serif", serif;
  --font-display: "IBM Plex Serif", serif;

  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1rem;
  --size-lg:   1.125rem;
  --size-xl:   1.5rem;
  --size-2xl:  2rem;
  --size-3xl:  3rem;
  --size-4xl:  4rem;
  --size-5xl:  5.5rem;

  /* ── Spacing ─────────────────────────────────── */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2rem;
  --sp-xl:  3rem;
  --sp-2xl: 5rem;
  --sp-3xl: 8rem;

  /* ── Radius ──────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-full: 9999px;

  /* ── Transitions ─────────────────────────────── */
  --t-fast:   0.15s ease-out;
  --t-med:    0.3s ease-out;
  --t-slow:   0.55s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Shadows ─────────────────────────────────── */
  --shadow-green: 0 0 24px rgba(57, 255, 20, 0.30);
  --shadow-card:  0 2px 16px rgba(0, 0, 0, 0.5);
  --shadow-nav:   0 2px 20px rgba(0, 0, 0, 0.55);

  /* ── Layout ──────────────────────────────────── */
  --nav-height: 72px;
}

/* Strictly enforce IBM Plex Serif across all heading elements */
h1, h2, h3, h4, h5, h6, 
.hero-title, .section-header h2, .contact-hero h1, .about-hero h1 {
  font-family: var(--font-heading) !important;
}

/* Courier Prime Utility Classes */
.courier-prime-regular { font-family: var(--font-mono); font-weight: 400; font-style: normal; }
.courier-prime-bold { font-family: var(--font-mono); font-weight: 700; font-style: normal; }
.courier-prime-regular-italic { font-family: var(--font-mono); font-weight: 400; font-style: italic; }
.courier-prime-bold-italic { font-family: var(--font-mono); font-weight: 700; font-style: italic; }