/* ============================================================
   EuroStocks — Colors & Type
   Source: BrandBookES 2026 v1.4
   ============================================================ */

/* ---------- Font: Inter (brand typeface) ----------
   Variable Inter (opsz + wght axes) — self-hosted from /fonts.
   Paths are resolved relative to this CSS file; consumers must
   load colors_and_type.css with a path that keeps /fonts reachable
   (the project root is on the same level as this file). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Variable Inter (opsz + wght), self-hosted from /fonts as WOFF2.
     Optical sizing (opsz) is handled by `font-optical-sizing: auto` on
     the root element below — it is NOT a valid @font-face descriptor. */
  src: url('fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.woff2') format('woff2');
}

:root {
  /* ---------- Primary colors ---------- */
  --es-blue:   #253883;  /* EuroStocks Blauw   — trust, stability */
  --es-cyan:   #00C0ED;  /* EuroStocks Cyaan   — innovation, energy */
  --es-black:  #111111;  /* EuroStocks Zwart */

  /* ---------- Secondary colors ---------- */
  --es-white:       #FFFFFF;
  --es-light-gray:  #F4F6F9;
  --es-gray:        #999999;  /* Tertiair grijs */
  --es-dark-gray:   #3A3F5C;

  /* ---------- Extended tonal scale (derived, harmonious) ---------- */
  --es-blue-900: #141e49;
  --es-blue-800: #1a266b;
  --es-blue-700: #253883;   /* brand blue */
  --es-blue-600: #31479b;
  --es-blue-500: #4359b3;
  --es-blue-400: #6d80c8;
  --es-blue-300: #a5b1dc;
  --es-blue-200: #ced4ee;
  --es-blue-100: #e7eaf7;
  --es-blue-50:  #f3f5fb;

  --es-cyan-900: #005670;   /* darkest — accessible link/hover on light */
  --es-cyan-800: #00708c;   /* accessible cyan text on light (WCAG AA) */
  --es-cyan-700: #0094b8;
  --es-cyan-600: #00a8d2;
  --es-cyan-500: #00C0ED;   /* brand cyan */
  --es-cyan-400: #3fd1f2;
  --es-cyan-300: #7fddf5;
  --es-cyan-200: #bfeef9;
  --es-cyan-100: #e0f6fc;

  --es-ink-900: #111111;    /* brand black */
  --es-ink-800: #1d1f26;
  --es-ink-700: #2a2d38;
  --es-ink-600: #3A3F5C;    /* brand dark gray */
  --es-ink-500: #5b607a;
  --es-ink-400: #7a7f95;
  --es-ink-300: #999999;    /* brand gray */
  --es-ink-200: #c9ccd4;
  --es-ink-100: #e4e6ec;
  --es-ink-50:  #F4F6F9;    /* brand light gray */
  --es-ink-0:   #FFFFFF;

  /* ---------- Semantic status colors (derived; not in brandbook) ---------- */
  --es-success: #10b17b;
  --es-warning: #f5a524;
  --es-danger:  #e5484d;
  --es-info:    var(--es-cyan-500);

  /* ---------- Semantic surface & text roles ---------- */
  --fg-1: var(--es-ink-900);        /* primary text on light */
  --fg-2: var(--es-ink-600);        /* secondary text */
  --fg-3: #696e82;                  /* tertiary / meta — darkened from ink-400 #7a7f95 for WCAG AA (5.06:1 on white) */
  --fg-4: var(--es-ink-300);        /* placeholder / disabled */
  --fg-accent: var(--es-blue-700);  /* link / accent text */
  --fg-on-dark: var(--es-white);
  --fg-on-accent: var(--es-white);

  --bg-1: var(--es-white);          /* app background */
  --bg-2: var(--es-ink-50);         /* sunken surface */
  --bg-3: var(--es-ink-100);        /* card subtle */
  --bg-inverse: var(--es-ink-900);
  --bg-brand: var(--es-blue-700);
  --bg-brand-soft: var(--es-blue-50);
  --bg-accent: var(--es-cyan-500);
  --bg-accent-soft: var(--es-cyan-100);

  --border-1: var(--es-ink-100);
  --border-2: var(--es-ink-200);
  --border-strong: var(--es-ink-600);
  --border-brand: var(--es-blue-700);
  --border-accent: var(--es-cyan-500);

  /* ---------- Type ---------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Brand weights (from brandbook): 400 Regular, 600 Semibold, 700 Bold, 800 Extrabold */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Type scale (desktop-first, 4pt baseline) */
  --fs-display: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 12px;   /* usually uppercase + tracked */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.12em;

  /* ---------- Spacing (4px baseline) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

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

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-sm: 0 1px 3px rgba(17, 17, 17, 0.08), 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(17, 17, 17, 0.10), 0 2px 4px rgba(17, 17, 17, 0.05);
  --shadow-lg: 0 16px 32px -8px rgba(17, 17, 17, 0.14), 0 4px 8px rgba(17, 17, 17, 0.06);
  --shadow-brand: 0 10px 24px -8px rgba(37, 56, 131, 0.35);
  --shadow-accent: 0 10px 24px -8px rgba(0, 192, 237, 0.45);
  --ring-accent: 0 0 0 3px rgba(0, 192, 237, 0.30);
  --ring-brand: 0 0 0 3px rgba(37, 56, 131, 0.22);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --container-narrow: 720px;
  --container-default: 1120px;
  --container-wide: 1280px;
}

/* ============================================================
   Base / element defaults
   ============================================================ */

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  margin: 0;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0;
}
.lead {
  font-size: var(--fs-h5);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.small { font-size: var(--fs-small); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }

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

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

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

/* ============================================================
   Utility: the "punt" — the signature cyan dot
   ============================================================ */
.es-dot::after {
  content: '';
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: 0.1em;
  border-radius: 50%;
  background: var(--es-cyan);
  transform: translateY(-0.05em);
}