/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Dijksynagoge.
 *
 * Palet conform het homepage-design (juni 2026): "editorial warm",
 * gesampled uit de interieurfoto — crème muren, schuurrode lambrisering,
 * messing/kaarslicht-goud, met parochet-navy voor donkere vlakken.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Copy this file to your web root, so it sits next to index.php, and clear
 * Drupal's cache. Then, any changes you make in this file should be
 * reflected right away.
 */

:root {
  --background: #f0e6ce; /* warme muur-crème */
  --foreground: #1b0e08; /* diep roodzwart */
  --card: #faf3e1; /* lichtste vlak */
  --card-foreground: #1b0e08;
  --primary: #8e3a2f; /* schuurrood — lambrisering */
  --primary-foreground: #ffffff;
  --primary-hover: #67241b; /* brand-deep */
  --secondary: #e5d8b6; /* diepere crème / zand */
  --secondary-foreground: #4e2f22;
  --muted: #e5d8b6;
  --muted-foreground: #836549; /* gedempt bruin */
  --accent: #b88847; /* messing-goud */
  --accent-foreground: #1b0e08;
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: #d6c19a;
  --input: #d6c19a;

  /* Dijksynagoge design-tokens (buiten de shadcn-set) */
  --ink: #1b0e08; /* vast diep roodzwart — flipt níet in .dark (footer-achtergrond) */
  --brand-deep: #67241b; /* podium / frontonschaduw */
  --brand-soft: #eac9be;
  --gold: #b88847; /* messing kandelaar */
  --gold-soft: #e2bc75; /* kaarslicht */
  --night: #1f2e4c; /* parochet-navy — donkere secties */
  --terracotta: #b3593e; /* verbouwing-accent */
  --rose: #b68893;
  --line-2: #b59b6e; /* nadrukkelijker lijn */
  --ink-2: #4e2f22; /* warm donkerbruin */
  --ink-3: #836549; /* gedempt bruin */
  --logo-blue: #1f8ac0; /* logo-golfblauw, spaarzaam */
  --logo-teal: #1f8a82; /* logo-accent, spaarzaam */

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-serif: "Spectral", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 4px;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

/*
 * Canvas-editor preview-fix voor viewport-units.
 *
 * De Canvas-preview rendert de pagina in een iframe die op zijn eigen
 * content-hoogte wordt geschaald (innerHeight ~7800px i.p.v. de schermhoogte).
 * Daardoor resolveren vh/dvh-units tegen die enorme iframe-hoogte en blaast
 * een fullbleed-hero met min-h-[70vh]/[76vh] op tot meerdere schermen hoog
 * (zie cta-component, minHeight-variant). Op de frontend klopt het wél, want
 * daar is vh de échte schermhoogte.
 *
 * Binnen de editor (body.path-canvas) vervangen we de vh-min-heights door een
 * vaste waarde — puur visueel in de preview; de opgeslagen markup verandert niet.
 */
.path-canvas .min-h-\[70vh\],
.path-canvas .xl\:min-h-\[76vh\],
.path-canvas .min-h-dvh {
  min-height: 32rem;
}

/*
 * Donkere variant = "night section" uit het design: parochet-navy met
 * goud-accenten (zoals de fundraising-sectie en de footer).
 */
.dark {
  --background: #1f2e4c;
  --foreground: #f2e9d8;
  /* Vlakken en lijnen als doorschijnend wit, zodat ze op élke donkere
     achtergrond werken (parochet-navy én ink-zwarte footer). */
  --card: rgb(255 255 255 / 0.05);
  --card-foreground: #ffffff;
  --primary: #b88847; /* goud als CTA op donker */
  --primary-foreground: #1b0e08;
  --primary-hover: #e2bc75; /* kaarslicht-goud */
  --secondary: rgb(255 255 255 / 0.08);
  --secondary-foreground: rgb(255 255 255 / 0.82);
  --muted: rgb(255 255 255 / 0.08);
  --muted-foreground: rgb(255 255 255 / 0.6);
  --accent: #e2bc75; /* kaarslicht-goud */
  --accent-foreground: #1b0e08;
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: rgb(255 255 255 / 0.14);
  --input: rgb(255 255 255 / 0.18);

  /* Design-tokens die in donkere secties meekleuren */
  --ink: #1b0e08;
  --line-2: rgb(255 255 255 / 0.5);
  --ink-2: rgb(255 255 255 / 0.82);
  --ink-3: rgb(255 255 255 / 0.6);
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-serif: "Spectral", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 4px;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}