/* ==========================================================================
   Intaiq — Design System Tokens
   "Clinical Calm, Operator Confident"
   ========================================================================== */

@import url('fonts.css');

:root {
  /* ---- Color: ink + paper (cool, faint blue undertone) ------------------ */
  --ink:        oklch(0.24 0.022 264);   /* near-black, cool blue undertone   */
  --ink-soft:   oklch(0.40 0.024 264);   /* secondary text                    */
  --ink-mute:   oklch(0.56 0.018 262);   /* tertiary / captions               */
  --line:       oklch(0.90 0.012 255);   /* hairlines                          */
  --line-soft:  oklch(0.94 0.009 250);

  --paper:      oklch(0.985 0.005 240);  /* clean cool off-white page bg       */
  --paper-2:    oklch(0.968 0.016 235);  /* soft sky-tinted alt section        */
  --white:      #ffffff;

  /* ---- Color: brand cobalt blue (primary) ------------------------------- */
  /* sampled from the live Intaiq brand: vivid royal/cobalt, navy, sky tints */
  --green-950:  oklch(0.23 0.075 264);   /* deep navy (dark sections)          */
  --green-900:  oklch(0.29 0.105 264);
  --green-800:  oklch(0.37 0.150 263);
  --green-700:  oklch(0.47 0.205 263);   /* PRIMARY brand cobalt               */
  --green-600:  oklch(0.54 0.215 261);
  --green-500:  oklch(0.62 0.205 259);   /* bright signal                      */
  --green-300:  oklch(0.78 0.115 254);
  --green-100:  oklch(0.92 0.050 250);   /* tint surfaces                      */
  --green-50:   oklch(0.965 0.022 245);

  /* ---- Color: violet (secondary data accent, used sparingly) ------------ */
  --indigo-700: oklch(0.47 0.200 290);
  --indigo-500: oklch(0.60 0.210 290);
  --indigo-100: oklch(0.92 0.055 290);

  /* ---- Color: amber (rare highlight / warning in product mocks) --------- */
  --amber-500:  oklch(0.74 0.130 75);
  --amber-100:  oklch(0.94 0.045 80);

  /* ---- Color: aqua + pink (brand accents from the logo mesh) ------------ */
  --aqua:       oklch(0.80 0.135 218);   /* bright brand cyan                 */
  --aqua-100:   oklch(0.93 0.060 215);
  --pink:       oklch(0.62 0.235 330);   /* brand magenta (very sparing)      */
  --pink-100:   oklch(0.92 0.070 330);
  --brand-gradient: linear-gradient(90deg, var(--aqua), var(--green-600) 52%, var(--pink));

  /* ---- Semantic ---------------------------------------------------------- */
  --bg:          var(--paper);
  --fg:          var(--ink);
  --brand:       var(--green-700);
  --brand-deep:  var(--green-900);
  --on-brand:    oklch(0.975 0.018 245);

  /* ---- Type -------------------------------------------------------------- */
  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Radius ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ---- Shadow (soft, clinical, low-contrast) ----------------------------- */
  --sh-xs: 0 1px 2px oklch(0.3 0.02 264 / 0.06);
  --sh-sm: 0 1px 3px oklch(0.3 0.02 264 / 0.07), 0 1px 2px oklch(0.3 0.02 264 / 0.05);
  --sh-md: 0 6px 18px oklch(0.3 0.03 264 / 0.09), 0 2px 6px oklch(0.3 0.02 264 / 0.05);
  --sh-lg: 0 18px 44px oklch(0.3 0.05 264 / 0.12), 0 6px 14px oklch(0.3 0.03 264 / 0.07);
  --sh-xl: 0 36px 90px oklch(0.28 0.06 264 / 0.18), 0 12px 30px oklch(0.3 0.04 264 / 0.09);
  --ring:  0 0 0 4px oklch(0.62 0.205 259 / 0.18);

  /* ---- Layout ------------------------------------------------------------ */
  --maxw: 1200px;
  --gut: clamp(20px, 4vw, 56px);
}

/* ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1, 'cv01' 1;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

::selection { background: var(--green-300); color: var(--ink); }

/* ---- Reusable layout helpers ------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap-wide { max-width: 1360px; }
.wrap-narrow { max-width: 920px; }

/* ---- Eyebrow / mono label ---------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--aqua), var(--green-600));
  display: inline-block;
}

/* ---- Brand accent rule (aqua→cobalt→pink hairline) -------------------- */
.accent-bar {
  height: 3px;
  width: 56px;
  border-radius: var(--r-pill);
  background: var(--brand-gradient);
}
.accent-bar--full { width: 100%; height: 3px; }

/* ---- Display scale ----------------------------------------------------- */
.display { font-size: clamp(2.6rem, 6.2vw, 5rem); letter-spacing: -0.035em; line-height: 0.98; }
.h-xl    { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.02; }
.h-lg    { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.h-md    { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.lede {
  font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}

.mono { font-family: var(--font-mono); }

/* ---- Reveal-on-scroll -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
  }
  .reveal.in { opacity: 1; transform: none; }
  .reveal[data-d="1"] { transition-delay: 0.07s; }
  .reveal[data-d="2"] { transition-delay: 0.14s; }
  .reveal[data-d="3"] { transition-delay: 0.21s; }
  .reveal[data-d="4"] { transition-delay: 0.28s; }
  .reveal[data-d="5"] { transition-delay: 0.35s; }
}