/* Design Tokens — Levenslicht Ecosystem */

:root {
  /* ── Base Colors ── */
  --bg: #FBF6EF;
  --text: #5C5549;
  --heading: #3A352E;
  --meta: #8A8279;
  --link-hover: #3A352E;
  --hairline: rgba(92, 85, 73, 0.3);

  /* ── Category Colors — Zonlicht Door De Dag ── */

  /* Geloofszekerheid — Roze Dageraad */
  --cat-geloofszekerheid: #D09070;
  --cat-geloofszekerheid-light: #D090701A;
  --cat-geloofszekerheid-muted: #D0907080;
  --cat-geloofszekerheid-dark: #AC7054;

  /* Waterdoop — Ochtendwater */
  --cat-waterdoop: #5AABB5;
  --cat-waterdoop-light: #5AABB51A;
  --cat-waterdoop-muted: #5AABB580;
  --cat-waterdoop-dark: #478D96;

  /* Geestelijke groei — Ochtendgloren */
  --cat-geestelijke-groei: #88B870;
  --cat-geestelijke-groei-light: #88B8701A;
  --cat-geestelijke-groei-muted: #88B87080;
  --cat-geestelijke-groei-dark: #6C9456;

  /* Theologie — Ochtendhemel */
  --cat-theologie: #7AA8C0;
  --cat-theologie-light: #7AA8C01A;
  --cat-theologie-muted: #7AA8C080;
  --cat-theologie-dark: #5A8AA0;

  /* Relaties & seksualiteit — Namiddaggloed */
  --cat-relaties: #CC7A68;
  --cat-relaties-light: #CC7A681A;
  --cat-relaties-muted: #CC7A6880;
  --cat-relaties-dark: #A85E4E;

  /* Gezin & opvoeding — Gouden Uur */
  --cat-gezin: #D4A840;
  --cat-gezin-light: #D4A8401A;
  --cat-gezin-muted: #D4A84080;
  --cat-gezin-dark: #B08B2E;

  /* Evangelisatie — Middagzon */
  --cat-evangelisatie: #E09840;
  --cat-evangelisatie-light: #E098401A;
  --cat-evangelisatie-muted: #E0984080;
  --cat-evangelisatie-dark: #BC7D2C;

  /* Ethiek — Zomermiddag */
  --cat-ethiek: #96A870;
  --cat-ethiek-light: #96A8701A;
  --cat-ethiek-muted: #96A87080;
  --cat-ethiek-dark: #788A54;

  /* Wereldgebeuren — Middaghemel */
  --cat-wereldgebeuren: #6898C8;
  --cat-wereldgebeuren-light: #6898C81A;
  --cat-wereldgebeuren-muted: #6898C880;
  --cat-wereldgebeuren-dark: #5078A8;

  /* Apologetiek — Avondschemering */
  --cat-maranatha: #C09080;
  --cat-maranatha-light: #C090801A;
  --cat-maranatha-muted: #C0908080;
  --cat-maranatha-dark: #9C7060;

  /* ── Fonts ── */
  --font-display: 'Grenze', serif;
  --font-body: 'Crimson Pro', serif;
  --font-mono: ui-monospace, 'SFMono-Regular', monospace;

  /* ── Typographic Scale (Fluid Awwwards Scale) ── */
  --text-6xl: clamp(3.052rem, 5vw + 1rem, 4.768rem);
  --text-5xl: clamp(2.441rem, 4vw + 1rem, 3.815rem);
  --text-4xl: clamp(1.953rem, 3vw + 1rem, 3.052rem);
  --text-3xl: clamp(1.563rem, 2vw + 1rem, 2.441rem);
  --text-2xl: clamp(1.25rem, 1.5vw + 1rem, 1.953rem);
  --text-xl: clamp(1.125rem, 1.2vw + 0.8rem, 1.563rem);
  --text-lg: clamp(1.05rem, 1vw + 0.8rem, 1.25rem);
  --text-base: 1rem;      /* Body: 21px */
  --text-sm: 0.85rem;     /* Small */
  --text-xs: 0.7rem;      /* Caption */

  /* ── Spacing Scale ── */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-48: 12rem;    /* 192px */

  /* ── Grid ── */
  --grid-columns: 12;
  --grid-gutter: 20px;
  --grid-margin: 48px;

  /* ── Breakpoints (documentation only — use px in media queries) ── */
  /* Mobile S: <480px */
  /* Mobile L: >=480px */
  /* Tablet: >=768px */
  /* Desktop: >=1024px */
  /* Desktop XL: >=1440px */

  /* ── Transitions (Awwwards Grade) ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;
  --duration-xslow: 800ms;

  /* ── Borders, Shadows & Glass ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Layered soft shadows for depth */
  --shadow-sm: 0 1px 2px rgba(92, 85, 73, 0.04), 0 2px 4px rgba(92, 85, 73, 0.04);
  --shadow-card: 0 2px 4px rgba(92, 85, 73, 0.04), 0 4px 8px rgba(92, 85, 73, 0.04), 0 8px 16px rgba(92, 85, 73, 0.04);
  --shadow-overlay: 0 4px 8px rgba(92, 85, 73, 0.05), 0 8px 16px rgba(92, 85, 73, 0.05), 0 16px 32px rgba(92, 85, 73, 0.05), 0 32px 64px rgba(92, 85, 73, 0.05);
  
  /* Glassmorphism */
  --glass-bg: rgba(251, 246, 239, 0.85); /* FBF6EF based */
  --glass-border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ── Responsive Grid Overrides ── */

@media (min-width: 1440px) {
  :root {
    --grid-gutter: 24px;
    --grid-margin: 80px;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  :root {
    --grid-gutter: 16px;
    --grid-margin: 32px;
  }
}

@media (max-width: 767px) and (min-width: 480px) {
  :root {
    --grid-gutter: 16px;
    --grid-margin: 20px;
  }
}

@media (max-width: 479px) {
  :root {
    --grid-gutter: 12px;
    --grid-margin: 16px;
  }
}

/* ── Responsive Typography ── */
/* Removed hardcoded mobile scale because we use fluid clamp() scaling now */

/* ── Base Styles ── */

html {
  font-size: 21px; /* Scaled up for modern classical reading experience */
}

@media (max-width: 767px) and (min-width: 480px) {
  html { font-size: 19px; }
}

@media (max-width: 479px) {
  html { font-size: 18px; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background-color: var(--bg);
  overflow-x: clip;
}

/* ── Content Layout ── */
.article-content,
.content-body {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}