/* ============================================================
   ARTEMIS TECH — COLOR & TYPE FOUNDATIONS
   Import this file (or copy the :root block) into any design.
   Fonts load from Google Fonts — see the @import at top.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* Plus Jakarta Sans — self-hosted from uploaded variable fonts */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* DM Sans — self-hosted from uploaded variable fonts */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND PRIMITIVES (exact values supplied) ---------- */
  --brand-blue:        #4A90C4;  /* Primary Blue  */
  --brand-blue-dark:   #2D6A9F;  /* Dark Blue     */
  --brand-navy:        #0E2A40;  /* Navy          */
  --brand-navy-deep:   #0B2235;  /* Deep Navy     */
  --brand-white:       #FFFFFF;  /* White         */

  /* ---------- BLUE SCALE (derived around the two brand blues) ---------- */
  --blue-50:   #EFF6FB;
  --blue-100:  #DCEAF4;
  --blue-200:  #BBD5E9;
  --blue-300:  #8FBADB;
  --blue-400:  #6AA4CF;
  --blue-500:  #4A90C4;  /* = --brand-blue, primary action */
  --blue-600:  #3A7DB0;
  --blue-700:  #2D6A9F;  /* = --brand-blue-dark, hover/pressed */
  --blue-800:  #245680;
  --blue-900:  #143A5A;

  /* ---------- NAVY SCALE (the dark sections) ---------- */
  --navy-700:  #163A57;  /* raised surface on navy (cards) */
  --navy-800:  #0E2A40;  /* = --brand-navy, section bg */
  --navy-900:  #0B2235;  /* = --brand-navy-deep, deepest bg */
  --navy-950:  #081A29;  /* footer / overscroll */

  /* ---------- WARM NEUTRALS (premium + warm, faint cool-warm blend) ---------- */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FBFCFD;  /* off-white page tint */
  --neutral-50:   #F5F7F9;
  --neutral-100:  #ECEFF3;
  --neutral-200:  #DDE3EA;
  --neutral-300:  #C3CCD6;
  --neutral-400:  #9AA6B4;
  --neutral-500:  #6F7E8E;
  --neutral-600:  #51606F;
  --neutral-700:  #3A4754;
  --neutral-800:  #28333D;
  --neutral-900:  #18222B;

  /* ---------- WARM ACCENT (DERIVED — flag for approval) ----------
     A single warm ember used VERY sparingly for forward-motion
     highlights, "live"/active dots, and the occasional CTA glow.
     Not in the supplied palette; here to deliver the "warm" mood. */
  --ember-300: #F6C9A4;
  --ember-400: #EFA877;
  --ember-500: #E58E54;  /* warm accent */
  --ember-600: #CE7639;

  /* ---------- SEMANTIC COLORS ---------- */
  --success-500: #2E9E6B;
  --success-50:  #E6F4EC;
  --warning-500: #D9942B;
  --warning-50:  #FBF1DF;
  --danger-500:  #D2483F;
  --danger-50:   #FAE9E7;
  --info-500:    var(--blue-500);
  --info-50:     var(--blue-50);

  /* ============================================================
     SEMANTIC TOKENS — LIGHT (default page)
     ============================================================ */
  --bg:            var(--neutral-25);
  --bg-subtle:     var(--neutral-50);
  --surface:       var(--neutral-0);
  --surface-raised:var(--neutral-0);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);

  --fg:            var(--navy-900);   /* primary text */
  --fg-secondary:  var(--neutral-600);/* body secondary */
  --fg-muted:      var(--neutral-500);/* captions, meta */
  --fg-on-brand:   var(--brand-white);

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-600);
  --accent-press:  var(--blue-700);
  --accent-subtle: var(--blue-50);
  --link:          var(--blue-700);

  --ring:          color-mix(in oklch, var(--blue-500) 45%, transparent);

  /* ---------- RADII ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --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;
  --space-10: 128px;

  /* ---------- SHADOWS (soft, cool-navy tinted) ---------- */
  --shadow-xs:  0 1px 2px rgba(11,34,53,.06);
  --shadow-sm:  0 1px 3px rgba(11,34,53,.08), 0 1px 2px rgba(11,34,53,.05);
  --shadow-md:  0 4px 12px rgba(11,34,53,.08), 0 2px 4px rgba(11,34,53,.05);
  --shadow-lg:  0 12px 32px rgba(11,34,53,.12), 0 4px 8px rgba(11,34,53,.06);
  --shadow-xl:  0 24px 64px rgba(11,34,53,.16), 0 8px 16px rgba(11,34,53,.08);
  --shadow-brand: 0 12px 32px rgba(74,144,196,.28);  /* blue glow on CTAs */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- MOTION (forward-motion motif: ease-out, leftward origin) ---------- */
  --ease-out:   cubic-bezier(.16,.84,.36,1);   /* default — decisive arrival */
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --ease-spring:cubic-bezier(.22,1.2,.36,1);   /* subtle overshoot, forward */
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}

/* ============================================================
   DARK / NAVY SECTION — wrap any block in .on-navy
   to flip semantic tokens for the deep-navy bands.
   ============================================================ */
.on-navy {
  --bg:            var(--navy-900);
  --bg-subtle:     var(--navy-950);
  --surface:       var(--navy-800);
  --surface-raised:var(--navy-700);
  --border:        color-mix(in oklch, #fff 12%, transparent);
  --border-strong: color-mix(in oklch, #fff 22%, transparent);

  --fg:            var(--brand-white);
  --fg-secondary:  color-mix(in oklch, #fff 78%, var(--navy-900));
  --fg-muted:      color-mix(in oklch, #fff 55%, var(--navy-900));

  --accent:        var(--blue-400);
  --accent-hover:  var(--blue-300);
  --link:          var(--blue-300);

  background: var(--bg);
  color: var(--fg);
}

/* ============================================================
   TYPE SCALE — semantic element styles
   Display uses Plus Jakarta Sans; body uses DM Sans.
   ============================================================ */
.display-1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.03em; color: var(--fg); }
.display-2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.025em; color: var(--fg); }
h1, .h1   { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--fg); }
h2, .h2   { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.018em; color: var(--fg); }
h3, .h3   { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -0.012em; color: var(--fg); }
h4, .h4   { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -0.008em; color: var(--fg); }

.lead     { font-family: var(--font-body); font-weight: 400; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--fg-secondary); }
p, .body  { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--fg-secondary); }
.body-sm  { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--fg-secondary); }
.caption  { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--fg-muted); }

/* Eyebrow / overline — small caps label, used above headings */
.eyebrow  { font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; font-weight: 400; }