/* ============================================================
   Zyniq Lab — Colors & Type
   The single source of truth for design tokens.
   Import this once in any HTML file:
     <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

/* ---------- Fonts ----------
   Display / headings : Roboto (variable, local — full weight + width axes)
   Body / UI          : Proxima Nova (local @font-face)
   Mono / code        : JetBrains Mono (Google Fonts)
*/
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/Proxima_Nova_Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("../fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
/* Proxima Nova heavier weights fall back to the Regular file (synthetic bold)
   until those weights are uploaded — add @font-face blocks for 500/600/700 when available. */

:root {
  /* ===== Brand · Arctic Reflection =====
     A cool, calm, monochromatic blue-gray system.
       slate    — primary text on light, dark surfaces
       arctic   — primary CTA, links, headings
       stone    — secondary accent, mid neutral
       mist     — hairline borders, soft fills
       ice      — page tint, warmest light surface
     With no warm or saturated accent in the source palette, "accent moments"
     use the deepest slate against the lighter blues — emphasis via depth,
     not hue.
  */
  --brand-slate:  #243C4C;
  --brand-arctic: #5289AD;
  --brand-stone:  #698696;
  --brand-mist:   #ACBCBF;
  --brand-ice:    #F4FCFB;

  /* Tonal stops so components have headroom + hover/press states */
  --slate-950:   #14242F;   /* deepest extreme, only for darkest surfaces */
  --slate-900:   #243C4C;   /* = slate · primary text */
  --slate-800:   #2C4658;
  --slate-700:   #34526A;
  --arctic-700:  #3D6485;
  --arctic-600:  #5289AD;   /* = arctic · primary CTA */
  --arctic-500:  #5289AD;   /* same hex; CTAs and links share */
  --arctic-400:  #7AA4C4;
  --stone-700:  #4D6675;
  --stone-600:  #698696;   /* = stone */
  --stone-500:  #809AAB;
  --plum-700:   #2C4658;   /* "accent dark" — reuses slate-800 */
  --plum-600:   #243C4C;   /* "accent" = depth, not hue */
  --plum-500:   #34526A;
  --plum-400:   #4D6675;
  --cream-300:  #E5ECED;

  /* Back-compat aliases — components reference these names; remap to new palette */
  --brand-night:  var(--brand-slate);
  --brand-lapis:  var(--brand-arctic);
  --brand-velvet: var(--brand-stone);
  --brand-plum:   var(--brand-slate);   /* accent = deep slate (no warm pop) */
  --brand-cream:  var(--brand-ice);

  --brand-navy-950: var(--slate-950);
  --brand-navy-900: var(--slate-900);
  --brand-navy-800: var(--slate-800);
  --brand-navy-700: var(--slate-700);
  --brand-blue-700: var(--arctic-700);
  --brand-blue-600: var(--arctic-600);
  --brand-blue-500: var(--arctic-500);
  --brand-blue-400: var(--arctic-400);
  --brand-cyan-500: var(--brand-slate);
  --brand-cyan-400: var(--slate-700);
  --brand-cyan-300: var(--brand-mist);

  /* Signature gradients · Arctic Reflection sweep */
  --brand-gradient:      linear-gradient(135deg, #14242F 0%, #243C4C 30%, #5289AD 70%, #ACBCBF 100%);
  --brand-gradient-soft: linear-gradient(135deg, #243C4C 0%, #5289AD 55%, #ACBCBF 85%, #F4FCFB 100%);
  --brand-gradient-text: linear-gradient(90deg,  #243C4C 0%, #5289AD 50%, #698696 100%);

  /* ===== Neutrals · cool slate-tinted (paired with ice) ===== */
  --ink-1000: #14242F;
  --ink-900:  #243C4C;
  --ink-700:  #3D5060;
  --ink-500:  #698696;
  --ink-400:  #8FA6B0;
  --ink-300:  #ACBCBF;
  --ink-200:  #C9D5D7;
  --ink-100:  #E5ECED;
  --ink-50:   #F4FCFB;
  --ink-0:    #FFFFFF;

  /* ===== Semantic surface / text aliases ===== */
  --bg:       var(--ink-0);
  --bg-muted: var(--ink-50);
  --bg-sunk:  var(--ink-100);
  --bg-inverse: var(--slate-900);
  --bg-cream: var(--brand-ice);

  --fg-1:     var(--ink-900);
  --fg-2:     var(--ink-700);
  --fg-3:     var(--ink-500);
  --fg-4:     var(--ink-400);
  --fg-on-brand: #FFFFFF;
  --fg-link:  var(--arctic-600);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus:  var(--arctic-500);

  /* ===== Status — tuned to sit with cool blues ===== */
  --success-500: #2E8C6A;
  --success-100: #DCEEE5;
  --warning-500: #B97A2B;
  --warning-100: #F1E1CC;
  --danger-500:  #B53E50;
  --danger-100:  #EFD8DC;
  --info-500:    var(--arctic-600);
  --info-100:    #DCE6ED;

  /* ===== Spacing scale (4pt base) ===== */
  --space-0:   0;
  --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: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ===== Shadows =====
     The brand sits in light, airy product UI — shadows are soft & cool-tinted,
     never warm/gray. Tinted with the navy hue at low alpha.
  */
  --shadow-xs: 0 1px 2px rgba(36, 60, 76, 0.06);
  --shadow-sm: 0 2px 6px rgba(36, 60, 76, 0.08);
  --shadow-md: 0 8px 20px rgba(36, 60, 76, 0.10);
  --shadow-lg: 0 20px 40px -10px rgba(36, 60, 76, 0.18);
  --shadow-xl: 0 30px 80px -20px rgba(36, 60, 76, 0.30);
  --shadow-glow-cyan: 0 0 0 6px rgba(36, 60, 76, 0.14), 0 10px 30px -10px rgba(36, 60, 76, 0.45);
  --shadow-glow-blue: 0 0 0 6px rgba(82, 137, 173, 0.18), 0 10px 30px -10px rgba(82, 137, 173, 0.55);
  --shadow-glow-plum: 0 0 0 6px rgba(36, 60, 76, 0.14), 0 10px 30px -10px rgba(36, 60, 76, 0.45);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  /* ===== Type system =====
     Display = wordmark / hero / section headers (Exo 2)
     Sans    = everything else (Plus Jakarta Sans)
     Mono    = code, automation triggers, "input → output" labels
  */
  --font-display: "Roboto", "Helvetica Neue", "Arial", system-ui, sans-serif;
  --font-display-heavy: "Roboto", "Helvetica Neue", "Arial", system-ui, sans-serif;
  --font-sans:    "Proxima Nova", "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (1.250 — major third). Use semantic styles below in real markup. */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.75;
}

/* ===== Base resets ===== */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Semantic typography classes =====
   Mirror these as CSS vars so JS/React can read them too.
*/
.display, h1.hero {
  font-family: var(--font-display-heavy);
  font-weight: 900;
  font-size: clamp(2.75rem, 6vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue-600);
}

.tagline {
  /* "AUTOMATE • INNOVATE • ELEVATE" treatment */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-navy-900);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--fg-2);
  font-weight: 400;
}

small, .small, .meta {
  font-size: var(--fs-14);
  color: var(--fg-3);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--brand-navy-800);
  background: var(--ink-100);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}
a:hover { color: var(--brand-cyan-500); }