/* ==========================================================================
   tokens.css — design system
   Derived from the Marke Webflow template's published style guide
   (see ../design_reference/marke-agency-webflow/DESIGN_NOTES.md),
   retuned for an engineering register: monospace metadata, semantic
   domain colour, blueprint surfaces instead of stock photography.
   ========================================================================== */

:root {
  /* ---- Core surface ---- */
  --ink:        #081122;   /* near-black blue — text, dark sections, footer */
  --ink-2:      #101B31;   /* raised dark surface */
  --ink-3:      #1B2740;   /* dark hairline / dark card */
  --paper:      #FBFAF9;   /* warm off-white — alternating sections, cards */
  --white:      #FFFFFF;
  --muted:      #6B707A;   /* secondary copy */
  --muted-dark: #8892A4;   /* secondary copy on dark */

  /* ---- Signal accent ---- */
  --accent:      #F5FE90;  /* primary CTA + the one flood section */
  --accent-deep: #E4F04A;  /* hover / underline */

  /* ---- Semantic domain colour (decoration → meaning) ---- */
  --dom-cloud:  #B0E0FF;   /* cloud & infrastructure */
  --dom-ai:     #DAD6FF;   /* AI / LLM tooling */
  --dom-mobile: #BCFFB0;   /* mobile & product */
  --dom-data:   #F5FE90;   /* data & backend */

  /* ---- Lines ---- */
  --line:      rgba(8, 17, 34, 0.12);
  --line-soft: rgba(8, 17, 34, 0.07);
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-dark-soft: rgba(255, 255, 255, 0.07);

  /* ---- Type ---- */
  --sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale lifted verbatim from the reference style guide, made fluid.
     72/80 · 56/60 · 42/50 · 32/40 · 24/34 · 20/30 · 16/24, tracking −2%. */
  --t-h1:   clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);    /* → 72px */
  --t-h2:   clamp(2.25rem, 1.5rem + 3.0vw, 3.5rem);    /* → 56px */
  --t-h3:   clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);  /* → 42px */
  --t-h4:   clamp(1.375rem, 1.15rem + 0.9vw, 2rem);    /* → 32px */
  --t-h5:   clamp(1.125rem, 1.03rem + 0.4vw, 1.5rem);  /* → 24px */
  --t-p1:   clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);  /* → 20px */
  --t-p2:   1rem;                                       /* 16px */
  --t-sm:   0.875rem;                                   /* 14px */
  --t-xs:   0.75rem;                                    /* 12px — mono labels */

  --lh-tight: 1.08;
  --lh-head:  1.14;
  --lh-body:  1.5;
  --tr-tight: -0.02em;   /* −2% */
  --tr-body:  -0.01em;   /* −1% */
  --tr-label:  0.09em;   /* mono labels open up */

  /* ---- Space ---- */
  --gutter:  clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  --shell:   1320px;
  --sec-y:   clamp(4.5rem, 2.5rem + 8vw, 9rem);
  --sec-y-s: clamp(3rem, 2rem + 4vw, 5rem);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Grain + blueprint surfaces, inlined so the site stays dependency-free */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--sans);
  font-size: var(--t-p2);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .sec--dark :focus-visible { outline-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}