/* ══════════════════════════════════════════════════════════════════════
   Inquerio AI / this.nl — canonical design tokens (styleguide v4, 260715)
   Source of truth: "260715 inquerio-ai styleguide v4/tokens/*.css".
   Combines fonts + colors + typography + spacing + effects. base.css is
   intentionally OMITTED — its element selectors (body/h1/ul…) fight the
   Tabler dashboard shell. Load this BEFORE brand-theme.css so the Tabler
   bridge can consume these vars. Pure token declarations — applies nothing.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Inquerio AI / this.nl, Webfonts ──────────────────────────────────
   Inter is the single brand typeface. The brand ships Regular (400) and
   Medium (500); Medium doubles as the "bold" weight (headings, <b>/<strong>).
   Heavier weights (600/700) fall back to the Inter loaded from Google Fonts
   on the marketing site, then to the system stack. Ship the two OTFs. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-Medium.otf") format("opentype");
}

/* Alias Medium onto the 600/700 slots so headings never render a synthetic
   bold that breaks the brand's tight, even weight. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Medium.otf") format("opentype");
}

/* ── Inquerio AI / this.nl, Color tokens ──────────────────────────────
   Primitive palette + semantic aliases, taken verbatim from the this.nl
   brand styleguide (primitive → semantic naming preserved). Two families:
   "blue" (brand) and "grey" (neutral), plus white. */

:root {
  /* ── Primitives, Blue (brand) ─────────────────────────────── */
  --blue-3:   #000828; /* midnight, deepest brand blue, dark surfaces  */
  --blue-21:  #273151; /* slate, secondary dark, borders on light      */
  --blue-38:  #1469AE; /* azure, the primary brand action color        */
  --blue-76:  #B5B8DC; /* soft lilac, muted brand tint                 */
  --blue-79:  #B2C3FF; /* aero, bright periwinkle, highlights          */
  --blue-90:  #DCE1F5; /* pale blue, tint surfaces, tertiary hover     */

  /* ── Primitives, Grey (neutral) ───────────────────────────── */
  --grey-6:   #141414; /* obsidian, primary text / near-black          */
  --grey-39:  #5E5C5A; /* stone, secondary text (warm grey)            */
  --grey-76:  #BABABA; /* silver, disabled, muted borders              */
  --grey-87:  #DDDAD4; /* warm sand, hairline borders                  */
  --grey-94:  #EFEEEB; /* pale sand, secondary background              */
  --grey-96:  #F3F3F3; /* soft grey, primary background                */
  --white:    #FFFFFF;

  /* ── Semantic, Background ─────────────────────────────────── */
  --bg-primary:        var(--grey-96);
  --bg-secondary:      var(--grey-94);
  --bg-tertiary:       var(--white);
  --bg-alternate:      var(--blue-3);   /* dark sections               */
  --bg-brand-primary:  var(--blue-38);
  --bg-brand-secondary:var(--blue-79);

  /* ── Semantic, Border ─────────────────────────────────────── */
  --border-primary:    var(--grey-87);
  --border-secondary:  var(--grey-76);
  --border-alternate:  var(--blue-21);

  /* ── Semantic, Text ───────────────────────────────────────── */
  --text-primary:            var(--grey-6);
  --text-secondary:          var(--grey-39);
  --text-alternate-primary:  var(--grey-96); /* on dark surfaces        */
  --text-alternate-secondary:var(--blue-76); /* muted on dark           */
  --text-brand:              var(--blue-38);

  /* ── Semantic, Subheader / kicker (contrast-aware) ────────────
     Slate on light surfaces, Pale blue on dark surfaces.           */
  --subheader-on-light:      var(--blue-21); /* slate  #273151       */
  --subheader-on-dark:       var(--blue-90); /* pale blue #DCE1F5    */

  /* ── Semantic, Button ─────────────────────────────────────── */
  --btn-primary:            var(--blue-38);
  --btn-primary-hover:      #105693;        /* azure, darkened (site)   */
  --btn-primary-focused:    #0f4f85;        /* azure, deeper (pressed)   */
  --btn-primary-disabled:   var(--grey-76);
  --btn-secondary:          var(--grey-94);
  --btn-secondary-hover:    var(--grey-87);
  --btn-secondary-focused:  var(--grey-94);
  --btn-secondary-pressed:  var(--grey-76);
  --btn-tertiary:           var(--blue-38);
  --btn-tertiary-hover:     var(--blue-90);
  --btn-tertiary-focused:   var(--blue-90);

  /* ── Semantic, Link ───────────────────────────────────────── */
  --link-primary:    var(--blue-38);
  --link-secondary:  var(--grey-6);
  --link-alternate:  var(--grey-96);

  /* ── Status (product UI: integration health/status badges) ──── */
  --status-ok:       #1F8A5B; /* running / healthy, green             */
  --status-ok-bg:    #E4F3EC;
  --status-warn:     #C77A1E; /* degraded, amber                      */
  --status-warn-bg:  #FBF0E0;
  --status-idle:     var(--grey-39); /* stopped, neutral              */
  --status-idle-bg:  var(--grey-94);
  --status-bad:      #C0392B; /* unhealthy, red                       */
  --status-bad-bg:   #FBEAEA;
}

/* ── Inquerio AI / this.nl, Typography tokens ─────────────────────────
   Inter throughout. Headings use weight 500 (Medium) with tight negative
   tracking; body is 400. Scale mirrors the marketing site + styleguide
   (Heading 1–6 + text-size-*). Fluid clamps for display sizes. */

:root {
  /* Families */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */

  /* OpenType, the site enables these Inter character variants */
  --font-features: "cv02", "cv03", "cv04", "cv11";

  /* ── Display / Heading scale (fluid) ───────────────────────── */
  --text-h1: clamp(2.25rem, 5vw, 3.5rem);     /* hero display        */
  --text-h2: clamp(1.85rem, 3.4vw, 2.75rem);
  --text-h3: clamp(1.25rem, 2vw, 1.5rem);
  --text-h4: 1.125rem;
  --text-h5: 1rem;
  --text-h6: 0.875rem;

  /* ── Body / text-size-* scale ──────────────────────────────── */
  --text-lead:    clamp(1.05rem, 1.4vw, 1.25rem); /* lead paragraph  */
  --text-large:   1.125rem;
  --text-medium:  1rem;   /* base body, 16px                        */
  --text-regular: 0.9375rem;
  --text-small:   0.8125rem;
  --text-tiny:    0.75rem;
  --text-micro:   0.6875rem; /* eyebrow / label uppercase            */

  /* ── Line heights ──────────────────────────────────────────── */
  --lh-display: 1.04;  /* @kind other */
  --lh-snug:    1.2;   /* @kind other */
  --lh-body:    1.55;  /* @kind other */
  --lh-relaxed: 1.7;   /* @kind other */

  /* ── Letter spacing ────────────────────────────────────────── */
  --ls-display:  -0.045em; /* h1                                     */
  --ls-heading:  -0.035em; /* h2–h4                                  */
  --ls-tight:    -0.02em;
  --ls-normal:   0;        /* @kind other */
  --ls-eyebrow:  0.16em;   /* uppercase eyebrow / label              */
}

/* ── Inquerio AI / this.nl, Spacing & layout tokens ───────────────────
   The site runs on a rem scale with generous section rhythm. Container
   caps at 80rem with a responsive inline gutter. */

:root {
  /* Spacing scale (rem) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-36: 9rem;     /* 144, desktop section padding */

  /* Layout */
  --container-max: 80rem;   /* 1280px */
  --gutter:        1.5rem;  /* mobile inline padding */
  --gutter-lg:     2.5rem;  /* desktop inline padding */
  --section-y:     6rem;    /* mobile vertical section rhythm */
  --section-y-lg:  9rem;    /* desktop */
}

@media (min-width: 1024px) {
  :root { --gutter: var(--gutter-lg); }
}

/* ── Inquerio AI / this.nl, Radius, border, shadow, motion ────────────
   The brand is flat and restrained: one 8px corner on every surface
   (buttons, inputs, cards, chips) — no other radius. Media (photos,
   mockups, screens) always gets straight 90° corners. Borders are
   hairline warm-grey. Motion is quick and understated  - a 1px lift on
   hover, no bounce. */

:root {
  /* Corner radius — 8px is the one and only surface radius */
  --radius:      8px;      /* everything: buttons, inputs, cards, chips */
  --radius-media: 0;       /* photos, mockups, screens — straight 90°    */
  --radius-full: 9999px;   /* circular only: avatar, round icon button   */

  /* Borders */
  --border-hairline: 1px solid var(--border-primary);
  --border-muted:    1px solid var(--border-secondary);

  /* Shadows, deliberately soft; most surfaces have none */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0, 8, 40, 0.06);   /* faint card lift */

  /* Focus ring */
  --focus-ring: 2px solid var(--blue-38);
  --focus-offset: 3px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 0.12s;   /* @kind other */
  --dur:      0.15s;   /* @kind other */
  --dur-slow: 0.45s;   /* @kind other */
  --lift: translateY(-1px); /* @kind other */

  /* Backdrop (sticky header / frosted overlays) */
  --backdrop-blur: blur(10px); /* @kind other */
}