/*
 * PADIS frontend design tokens.
 *
 * This is the overridable token layer. Every visual value on the public site
 * resolves from a custom property declared here, so styling can be re-themed
 * without touching component CSS.
 *
 * Per-customer theming (later): ship an additional stylesheet loaded AFTER this
 * file that redefines only the tokens that differ for that customer. The
 * cascade makes the customer values win, and untouched tokens fall back here.
 * A Figma token export can generate exactly such an override file.
 *
 * Brand purple is kept in sync with DataLab.css --dl-primary-color (#5E2FBC).
 *
 * :host makes the tokens resolve inside BlockPreview's shadow roots in the
 * backoffice, where :root matches nothing.
 */
:root,
:host {
  --padis-color-primary: #5e2fbc;
  --padis-color-primary-dark: #4b2696;
  --padis-color-primary-darker: #381c71;
  --padis-color-on-primary: #ffffff;

  /* Optional second and third brand colours, picked per element where an editor
     chooses Sekundær/Accent (e.g. Hero CTAs, nav pills). They fall back to the
     primary family, so a company that sets none looks exactly as before. The
     hover shades are derived, keeping the palette to one colour + text each. */
  --padis-color-secondary: var(--padis-color-primary);
  --padis-color-secondary-dark: color-mix(in srgb, var(--padis-color-secondary) 82%, #000);
  --padis-color-on-secondary: var(--padis-color-on-primary);
  --padis-color-accent: var(--padis-color-primary);
  --padis-color-accent-dark: color-mix(in srgb, var(--padis-color-accent) 82%, #000);
  --padis-color-on-accent: var(--padis-color-on-primary);

  /* Alert/warning accent, e.g. the operational messages bar. */
  --padis-color-alert: #b3261e;
  --padis-color-on-alert: #ffffff;

  /* Message-type accent colours for the operational messages bar (Driftsmeddelelse).
     Info = green, Advarsel = orange. Kept as their own tokens so they stay
     overridable per company through theme.cshtml. */
  --padis-color-alert-info: #2e7d32;
  --padis-color-on-alert-info: #ffffff;
  --padis-color-alert-warning: #b3540e;
  --padis-color-on-alert-warning: #ffffff;
  /* Neutrals and surfaces */
  --padis-color-text: #1c1330;
  --padis-color-text-muted: #5b5470;
  /* Muted off-white so cards read as tonal, not stark white. Kept as a
     separate "-opaque" source for contexts that re-scope --padis-color-surface
     to a translucent color-mix() (e.g. hero.css's overlay glass card). */
  --padis-color-surface-opaque: #faf9fc;
  --padis-color-surface: var(--padis-color-surface-opaque);
  --padis-color-surface-alt: #f5f2fb;
  --padis-color-border: #e3ddf0;
  --padis-color-footer-bg: #1c1330;
  --padis-color-footer-text: #e9e4f5;

  /* Error/danger state. Generically named so any component needing an error
     colour (form validation, error messages, etc.) can reuse these instead of
     introducing its own hardcoded values. */
  --padis-color-error: #b3261e;
  --padis-color-error-surface: #fdecea;

  /* Typography */
  --padis-font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --padis-font-heading: "Roboto Slab", Georgia, "Times New Roman", serif;
  --padis-font-size-base: 1rem;
  --padis-line-height-base: 1.6;

  /* Layout. The gutters scale with the viewport; the max values are ceilings,
     not fixed widths, so the layout stays fluid until it hits them. */
  --padis-gutter: clamp(1rem, 4vw, 3rem);
  --padis-gutter-wide: clamp(1rem, 5vw, 4rem);
  /* Content width matches the legacy site (Tailwind .container + px-4): 1248px
     of content on desktop, stepping up to 1504px on wide screens (see the
     media query below). */
  --padis-container-max: 78rem;
  /* The footer runs wider than the page content, matching the legacy site. */
  --padis-container-max-wide: 96rem;
  --padis-space-sm: 0.75rem;
  --padis-space-md: 1.5rem;
  --padis-space-lg: 3rem;
  --padis-space-xl: 5rem;
  --padis-radius: 0.5rem;
  --padis-shadow: 0 1px 3px rgba(28, 19, 48, 0.12), 0 1px 2px rgba(28, 19, 48, 0.08);
  --padis-shadow-hover: 0 4px 10px rgba(28, 19, 48, 0.08), 0 12px 28px rgba(28, 19, 48, 0.10);

  --padis-hero-overlay: rgba(28, 19, 48, 0.45);
  --padis-nav-gap: var(--padis-space-md);
  /* Optional coloured pill behind an individual nav item, opted into per item.
     Legacy split these by menu-item type; here an editor picks per item, so one
     set covers both. */
  --padis-nav-pill-bg: var(--padis-color-primary);
  --padis-nav-pill-hover: var(--padis-color-primary-dark);
  --padis-nav-pill-text: var(--padis-color-on-primary);
  /* Shared geometry so the pills stay consistent from one source. */
  --padis-nav-pill-padding-block: 0.3em;
  --padis-nav-pill-padding-inline: 0.85em;

  /* Header (floating pill that appears on scroll). Transparent at rest; the
     scrolled background is deliberately translucent so content shows through. */
  --padis-header-logo-height: 4rem;
  --padis-header-logo-height-scrolled: 3rem;
  --padis-header-padding: 2rem;
  --padis-header-padding-scrolled: 1rem;
  /* Presets behind the Header Spacing setting, so per-company spacing stays on
     a fixed scale instead of drifting to arbitrary values. */
  --padis-header-padding-compact: 1rem;
  --padis-header-padding-normal: 2rem;
  --padis-header-padding-spacious: 3rem;
  /* Derived from the brand colour so a themed company gets a matching pill. The
     source is a separate token so the Header tab can override just the colour
     while the translucency stays a design decision. */
  --padis-header-bg-scrolled-source: var(--padis-color-primary-darker);
  --padis-header-bg-scrolled: color-mix(in srgb, var(--padis-header-bg-scrolled-source) 72%, transparent);
  --padis-header-blur: 12px;
  --padis-header-radius: 1rem;
  /* Legacy-style solid bar. Opaque on purpose, so it reads as a real header
     rather than the translucent pill. */
  --padis-header-bg-solid: var(--padis-color-primary-darker);
  /* Header text. The resting default follows the page, the scrolled one the
     header's own background; either can be overridden per company. */
  --padis-header-text: var(--padis-color-text);
  --padis-header-text-scrolled: var(--padis-color-on-primary);
  /* At rest the header spans the viewport; it only collapses to a centred pill
     once scrolled. Both values override .padis-container, which the inner
     element also carries. */
  --padis-header-max: 100%;
  /* The scrolled pill is defined by its inset rather than a max-width: a fixed
     cap only bites above that width, so the logo shifted a different amount
     (and at some widths the opposite way) depending on the viewport. */
  --padis-header-max-scrolled: 100%;
  /* Outer inset on the bar. Zero at rest so the pill can pull away from the
     edges on scroll at any viewport width, not just above the container cap. */
  --padis-header-inset: 0rem;
  /* Derived from the resting gutter so the logo always travels the same short
     distance, whatever the viewport. */
  --padis-header-inset-scrolled: calc(var(--padis-header-gutter) + 2.5rem);
  /* Inner gutter between the header edge and the logo/nav. Lines the logo and
     the nav up with the page container, like the legacy header (which sat in
     the same .container as the content). The percentage resolves against the
     header's own width. */
  --padis-header-gutter: max(var(--padis-gutter), (100% - var(--padis-container-max)) / 2);
  --padis-header-gutter-scrolled: 2rem;
  --padis-header-float-gap: var(--padis-space-sm);
  --padis-header-transition: 0.3s ease-in-out;
  /* Background before scrolling (Floating pill / Sticky bar) is deliberately not
     declared here: unset, it falls back to transparent, or to a light dark band
     over a Fullscreen hero (see site.css). The Theme tab's "Background before
     scrolling" sets it for both. */

  /* Footer reveal. Set at runtime from the footer's measured height so the
     content above it can reserve exactly the right amount of scroll room. */
  --padis-footer-height: 0px;
}

/* Wide screens get the legacy site's wider content column (1536px container
   minus its 16px padding on each side). */
@media (min-width: 96rem) {
  :root,
  :host {
    --padis-container-max: 94rem;
  }
}