/* ============================================================
   Visstick AI — Design Tokens
   Blauw / wit / grijs huisstijl
   Single source of truth — import in elk artifact.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Type families ---------- */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-heading: 'Geist', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Brand palette ---------- */
  --blue-900: #0a1d3a;
  --blue-800: #11325f;
  --blue-700: #1a4789;
  --blue-600: #1e5fb4;   /* primary */
  --blue-500: #3a7ed4;
  --blue-400: #6ba3e3;
  --blue-300: #9ec5fe;   /* fish / soft hilites */
  --blue-200: #c7dffa;
  --blue-100: #e6f0fb;
  --blue-50:  #f3f7fc;

  --grey-900: #0e1320;
  --grey-800: #1f2533;
  --grey-700: #3a4255;
  --grey-600: #5a6274;
  --grey-500: #818897;
  --grey-400: #a7adb9;
  --grey-300: #cdd1da;
  --grey-200: #e3e6ec;
  --grey-100: #eef0f4;
  --grey-50:  #f7f8fa;
  --white:    #ffffff;

  --fish-blue:        #7fb3e6;
  --fish-blue-light:  #bfd9f3;

  /* ---------- Semantic ---------- */
  --bg-page:        var(--white);
  --bg-subtle:      var(--grey-50);
  --bg-mute:        var(--grey-100);
  --bg-inverse:     var(--blue-900);
  --bg-inverse-2:   var(--blue-800);

  --fg-primary:     var(--grey-900);
  --fg-secondary:   var(--grey-600);
  --fg-tertiary:    var(--grey-500);
  --fg-on-inverse:  var(--white);
  --fg-on-accent:   var(--white);

  --border-subtle:  rgba(14, 19, 32, 0.06);
  --border-default: rgba(14, 19, 32, 0.10);
  --border-strong:  rgba(14, 19, 32, 0.18);

  --link:           var(--blue-600);
  --link-hover:     var(--blue-700);

  --accent:         var(--blue-600);
  --accent-hover:   var(--blue-700);
  --accent-press:   var(--blue-800);
  --accent-soft:    var(--blue-100);

  --status-success: #1b7a3f;
  --status-warning: #b56b00;
  --status-error:   #b3261e;
  --status-info:    var(--blue-600);

  /* ---------- Type scale ---------- */
  --fs-display: clamp(3rem, 9vw, 8rem);
  --fs-h0:      clamp(2.5rem, 7vw, 6rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4.25rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3:      1.625rem;
  --fs-h4:      1.25rem;
  --fs-h5:      1.0625rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.75rem;

  --fw-display: 400;
  --fw-heading: 500;
  --fw-body:    400;
  --fw-body-md: 500;
  --fw-body-sb: 600;

  --lh-display: 0.95;
  --lh-heading: 1.1;
  --lh-body:    1.55;

  --letter-display: -0.035em;
  --letter-tight:   -0.025em;
  --letter-eyebrow: 0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs:   0 1px 2px rgba(14, 19, 32, 0.04);
  --shadow-sm:   0 2px 6px rgba(14, 19, 32, 0.05);
  --shadow-md:   0 6px 24px rgba(14, 19, 32, 0.06);
  --shadow-lg:   0 16px 48px rgba(14, 19, 32, 0.10);
  --shadow-blue: 0 12px 32px rgba(30, 95, 180, 0.18);
  --shadow-focus: 0 0 0 3px rgba(30, 95, 180, 0.30);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast: 0.12s;
  --dur-base: 0.22s;
  --dur-slow: 0.4s;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-pad: clamp(1rem, 4vw, 2rem);
}

/* ============================================================
   Dark mode (opt-in via [data-theme="dark"] on <html> or <body>)
   ============================================================ */

[data-theme="dark"] {
  --bg-page:       var(--blue-900);
  --bg-subtle:     #0f2547;
  --bg-mute:       #142e5a;
  --bg-inverse:    var(--white);

  --fg-primary:    var(--white);
  --fg-secondary:  rgba(255, 255, 255, 0.70);
  --fg-tertiary:   rgba(255, 255, 255, 0.50);
  --fg-on-inverse: var(--grey-900);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.20);

  --link:        var(--blue-300);
  --link-hover:  var(--blue-200);

  --accent-soft: rgba(30, 95, 180, 0.20);

  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40);
}

/* ============================================================
   Element defaults
   ============================================================ */

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

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--letter-tight);
  color: var(--fg-primary);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }

.h-display {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--letter-display);
  margin: 0 0 0.3em;
  text-wrap: balance;
}
.h-display em, .serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--blue-600);
  letter-spacing: -0.01em;
}

p { margin: 0 0 0.7em; text-wrap: pretty; }
strong, b { font-weight: var(--fw-body-sb); }

a { color: var(--link); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--link-hover); }
img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-600);
}

.lead {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.95em; }

::selection { background: var(--blue-200); color: var(--blue-900); }