/* ============================================================
   ONALGO — Colors & Type
   Brand: nalgo (Your Growth Transformation Partner)
   ============================================================ */

/* Filson Pro is the official brand font (commercial — Mostardesign).
   We substitute Mulish from Google Fonts as the closest free match
   (humanist geometric sans, similar x-height and proportions).
   Replace --font-sans with Filson Pro when licensed files are provided. */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --navy-900:        #0B1024;   /* deepest navy, used for high-contrast surfaces */
  --navy-800:        #131A35;
  --navy:            #171E3B;   /* PRIMARY brand navy */
  --navy-600:        #2A325A;
  --navy-500:        #4B557C;
  --navy-400:        #7A82A1;
  --navy-300:        #ADB3C6;
  --navy-200:        #D4D7E1;
  --navy-100:        #E8EAF0;

  --blue:            #2137FF;   /* ACCENT — electric blue, used sparingly */
  --blue-700:        #1A2BD6;
  --blue-300:        #6A78FF;
  --blue-100:        #C8CDFF;

  --pink:            #FFA5EC;   /* secondary accent — soft punch */
  --pink-300:        #FFC8F2;
  --pink-100:        #FFE5F8;

  --lavender:        #E1E4FF;   /* tonal background, calm surfaces */
  --lavender-300:    #EDEFFF;
  --lavender-100:    #F4F6FF;

  --white:           #FFFFFF;
  --off-white:       #FAFAFC;
  --paper:           #F4F4F7;

  /* Semantic */
  --success:         #1FAE6F;
  --warning:         #E2A53D;
  --danger:          #E2533D;

  /* ---------- SEMANTIC SURFACES & FG ---------- */
  --bg:              var(--white);
  --bg-alt:          var(--off-white);
  --bg-tonal:        var(--lavender-100);
  --bg-strong:       var(--navy);
  --bg-inverse:      var(--navy);

  --fg:              var(--navy);
  --fg-muted:        var(--navy-500);
  --fg-subtle:       var(--navy-400);
  --fg-on-dark:      var(--white);
  --fg-on-dark-muted:#B6BBD0;
  --fg-accent:       var(--blue);

  --border:          var(--navy-100);
  --border-strong:   var(--navy-200);
  --border-on-dark:  rgba(255,255,255,0.12);

  /* ---------- TYPE ---------- */
  --font-sans:       'Mulish', 'Filson Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (semi-fluid, designed for marketing pages) */
  --fs-display-xl:   clamp(56px, 7vw, 104px);
  --fs-display:      clamp(44px, 5.5vw, 80px);
  --fs-h1:           clamp(36px, 4vw, 56px);
  --fs-h2:           clamp(28px, 3vw, 40px);
  --fs-h3:           clamp(22px, 2vw, 28px);
  --fs-h4:           20px;
  --fs-body-lg:      19px;
  --fs-body:         17px;
  --fs-body-sm:      15px;
  --fs-caption:      13px;
  --fs-eyebrow:      12px;

  --lh-tight:        1.05;
  --lh-snug:         1.18;
  --lh-base:         1.55;
  --lh-loose:        1.7;

  --tracking-tight:  -0.02em;
  --tracking-base:   0;
  --tracking-eyebrow:0.14em;

  /* ---------- SPACING ---------- */
  --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: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs:  0 1px 2px rgba(23, 30, 59, 0.06);
  --shadow-sm:  0 2px 8px rgba(23, 30, 59, 0.06), 0 1px 2px rgba(23, 30, 59, 0.04);
  --shadow-md:  0 8px 24px rgba(23, 30, 59, 0.08), 0 2px 6px rgba(23, 30, 59, 0.04);
  --shadow-lg:  0 24px 48px rgba(23, 30, 59, 0.10), 0 4px 12px rgba(23, 30, 59, 0.06);
  --shadow-pop: 0 18px 40px rgba(33, 55, 255, 0.18);

  /* ---------- MOTION ---------- */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:        140ms;
  --dur-base:        220ms;
  --dur-slow:        420ms;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display-xl, h1.display, .t-display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  color: var(--fg);
  text-wrap: balance;
}

.display, .t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  text-wrap: balance;
}

h1, .t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  text-wrap: balance;
}

h2, .t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  text-wrap: balance;
}

h3, .t-h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 700;
}

h4, .t-h4 {
  font-size: var(--fs-h4);
  line-height: 1.35;
  font-weight: 600;
}

p, .t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  text-wrap: pretty;
}

.t-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

.t-body-sm, small {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

.t-caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}

.t-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

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

a {
  color: var(--fg-accent);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

::selection { background: var(--pink); color: var(--navy); }