/* ============================================================
   Rust en Ruimte Ontruiming — Design Foundations
   Colors + Type tokens. Import this file into any artifact.

   Font: Circular is proprietary. We substitute GEIST SANS
   (open-source, Vercel) as the closest humanist-geometric match,
   loaded from Google Fonts. Code uses Geist Mono / system mono.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND / ACCENT ---------- */
  --primary:        #1e3a5f;   /* blauw — hoofdkleur */
  --primary-deep:   #16324f;   /* knoppen / pressed-darken */
  --primary-soft:   #9dbfe0;   /* licht blauw — accent op donkere vlakken */

  /* rare accents — charts & logos ONLY, never system color */
  --accent-purple:  #6b01c2;
  --accent-violet:  #644fc1;
  --accent-yellow:  #ffdb13;
  --accent-tomato:  #ff2201;
  --accent-pink:    #c7007e;
  --accent-indigo:  #054cff;
  --accent-crimson: #e2005a;

  /* ---------- SURFACE ---------- */
  --canvas:            #f8f9fa;   /* achtergrond */
  --canvas-soft:       #eef3f8;   /* lichte secties */
  --canvas-night:      #16324f;   /* donkere vlakken — diep blauw */
  --canvas-night-soft: #1c3a59;

  /* hairline grey ladder */
  --hairline:          #dce3ec;
  --hairline-strong:   #c3cedb;
  --hairline-cool:     #e6ecf3;
  --hairline-cool-2:   #e9eef4;
  --hairline-cool-3:   #cbd6e2;

  /* ---------- TEXT ---------- */
  --ink:           #2b2b2b;   /* tekst */
  --ink-secondary: #333a42;
  --ink-mute:      #5b6470;   /* secundair / helper */
  --ink-mute-2:    #8a93a0;   /* tertiair */
  --ink-faint:     #aeb6c0;   /* disabled / placeholder */
  --on-primary:    #ffffff;   /* tekst OP blauw — wit */
  --on-dark:       #f8f9fa;

  /* ---------- RADIUS ---------- */
  --radius-xs:   4px;   /* inputs, hairline tags */
  --radius-sm:   6px;   /* BUTTONS (signature), code blocks */
  --radius-md:   8px;   /* compact cards, alerts */
  --radius-lg:   12px;  /* feature/pricing cards, mockups */
  --radius-xl:   16px;  /* modals, large chrome */
  --radius-full: 9999px;

  /* ---------- SPACING (base 8) ---------- */
  --space-xxs:  2px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-lg:   16px;
  --space-xl:   24px;
  --space-xxl:  32px;
  --space-huge: 64px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.12);

  /* ---------- TYPE ---------- */
  --font-sans: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* foreground aliases (semantic) */
  --fg1: var(--ink);          /* primary text */
  --fg2: var(--ink-mute);     /* secondary text */
  --fg3: var(--ink-mute-2);   /* tertiary text */
  --bg1: var(--canvas);
  --bg2: var(--canvas-soft);
  --bg-dark: var(--canvas-night);
}

/* ============================================================
   TYPE SCALE — weight 500 across display with negative tracking
   ============================================================ */
.display-xxl { font-family: var(--font-sans); font-size: 64px; font-weight: 700; line-height: 1.1;  letter-spacing: -1.6px; }
.display-xl  { font-family: var(--font-sans); font-size: 48px; font-weight: 700; line-height: 1.1;  letter-spacing: -1.2px; }
.display-lg  { font-family: var(--font-sans); font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.6px; }
.display-md  { font-family: var(--font-sans); font-size: 28px; font-weight: 700; line-height: 1.2;  letter-spacing: -0.4px; }
.heading-lg  { font-family: var(--font-sans); font-size: 22px; font-weight: 600; line-height: 1.2;  letter-spacing: 0; }
.heading-md  { font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1.4;  letter-spacing: 0; }
.body-lg     { font-family: var(--font-sans); font-size: 18px; font-weight: 400; line-height: 1.55; letter-spacing: 0; }
.body-md     { font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.5;  letter-spacing: 0; }
.button-md   { font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.0;  letter-spacing: 0; }
.caption     { font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0; }
.micro       { font-family: var(--font-sans); font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: 0; }
.code        { font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.5;  letter-spacing: 0; }

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS — opt in via .rr-prose or :root scope
   ============================================================ */
.rr-root, .rr-prose {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rr-prose h1 { font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -1.2px; margin: 0 0 .4em; }
.rr-prose h2 { font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.6px; margin: 0 0 .4em; }
.rr-prose h3 { font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0 0 .4em; }
.rr-prose p  { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--fg1); margin: 0 0 1em; }
.rr-prose a  { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.rr-prose code { font-family: var(--font-mono); font-size: .9em; background: var(--canvas-night); color: var(--on-dark); padding: 2px 6px; border-radius: var(--radius-xs); }