/* InterieurMeester — Design Tokens
 * Inspired by Stripe (awesome-design-md/stripe).
 * Source: https://getdesign.md/stripe/design-md
 *
 * Design principles:
 *  - Weight 300 als signature (geen 600/700 op headlines)
 *  - Deep navy #061b31 voor headings, niet zwart
 *  - Blue-tinted shadows (rgba(50,50,93,…)) — chromatic depth
 *  - Conservative radius 4–8px (geen pill shapes)
 *  - sohne-var → SF Pro Display fallback (Söhne is paid)
 *  - ss01 OpenType feature op alle sohne-var tekst
 *  - tnum voor financiële/tabular numerieke data
 */

:root {
  /* ───── Brand & surfaces ───── */
  --bg:               #ffffff;
  --bg-soft:          #f6f9fc;
  --brand:            #533afd;
  --brand-hover:      #4434d4;
  --brand-deep:       #2e2b8c;
  --brand-light:      #b9b9f9;
  --brand-lighter:    #d6d9fc;
  --brand-dark:       #1c1e54;

  /* ───── Text ───── */
  --heading:          #061b31;  /* deep navy — never #000 */
  --label:            #273951;  /* form labels, secondary headings */
  --body:             #64748d;  /* body, captions */

  /* ───── Borders ───── */
  --border:           #e5edf5;
  --border-purple:    #b9b9f9;
  --border-soft:      #d6d9fc;
  --border-dashed:    #362baa;

  /* ───── Status ───── */
  --success-bg:       rgba(21, 190, 83, 0.12);
  --success-text:     #108c3d;
  --success-border:   rgba(21, 190, 83, 0.40);

  --warn-bg:          rgba(255, 170, 0, 0.12);
  --warn-text:        #a56200;
  --warn-border:      rgba(255, 170, 0, 0.45);

  --danger-bg:        rgba(234, 34, 97, 0.08);
  --danger-text:      #c0174a;
  --danger-border:    rgba(234, 34, 97, 0.35);

  /* ───── Decorative accents (gradient/icon only — never CTA) ───── */
  --ruby:             #ea2261;
  --magenta:          #f96bee;

  /* ───── Shadows — multi-layer, blue-tinted ───── */
  --shadow-ambient-sm: rgba(23, 23, 23, 0.06) 0px 3px 6px;
  --shadow-ambient:    rgba(23, 23, 23, 0.06) 0px 3px 6px,
                       rgba(23, 23, 23, 0.08) 0px 15px 35px;
  --shadow-card:       rgba(50, 50, 93, 0.25) 0px 30px 45px -30px,
                       rgba(0, 0, 0, 0.10) 0px 18px 36px -18px;
  --shadow-deep:       rgba(3, 3, 39, 0.25) 0px 14px 21px -14px,
                       rgba(0, 0, 0, 0.10) 0px 8px 17px -8px;
  --shadow-button:     rgba(50, 50, 93, 0.15) 0px 4px 10px -2px;
  --shadow-focus:      0 0 0 3px rgba(83, 58, 253, 0.12);

  /* ───── Border radius ───── */
  --radius-xs: 4px;   /* buttons, inputs, pills */
  --radius-sm: 5px;
  --radius-md: 6px;   /* nav, larger interactive */
  --radius-lg: 8px;   /* featured cards */

  /* ───── Spacing scale (8px base) ───── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  14px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  28px;
  --space-9:  32px;
  --space-10: 40px;

  /* ───── Typography ───── */
  --font-sans: 'sohne-var', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
               system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'Source Code Pro', SFMono-Regular, Menlo, Consolas, monospace;

  /* sizes */
  --fs-display:    48px;
  --fs-h1:         32px;
  --fs-h2:         22px;
  --fs-h3:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-micro:      12px;
  --fs-nano:       11px;

  /* tracking — tighter at display sizes */
  --tracking-display: -0.96px;
  --tracking-h1:      -0.64px;
  --tracking-h2:      -0.22px;
  --tracking-h3:      -0.18px;
  --tracking-mono:     0.6px;   /* for uppercase mono labels */

  /* layout */
  --content-max: 1080px;
  --header-h: 64px;
}

/* ───── Reset & base ───── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--heading);
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01";
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, .mono {
  font-family: var(--font-mono);
  font-feature-settings: normal;
}

.tnum { font-feature-settings: "tnum"; }

/* ───── Typography utilities ───── */
.page-title {
  font-size: var(--fs-display);
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  color: var(--heading);
  margin: 0 0 var(--space-1) 0;
}
.page-subtitle {
  color: var(--body);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  margin: 0 0 var(--space-8) 0;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

::selection { background: rgba(83, 58, 253, 0.18); color: var(--heading); }

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