/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/*
 * Swisslinx / Circle8 brand. See docs/swisslinx-brand.md.
 * Arial only; never substitute. Colours used as CSS variables for consistency.
 */

:root {
  /* Primary */
  --c8-blue: #112d63;
  --c8-red: #e40520;
  --c8-mint: #e1f0ec;
  --c8-white: #ffffff;

  /* Secondary */
  --c8-deep-mint: #7b9e84;
  --c8-faded-blue: #a2b9cb;
  --c8-fresh-mint: #f3faf7;
  --c8-light-gray: #f3f3f3;

  /* Tertiary */
  --c8-violet: #bca0b7;
  --c8-gold: #f1ac4d;

  /* Typography */
  --font-brand: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--c8-fresh-mint);
  color: var(--c8-blue);
  font-family: var(--font-brand);
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
}

button {
  font-family: var(--font-brand);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--c8-light-gray);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  color: var(--c8-blue);
}

/*
 * Module cards. Glass surface with a Circle8 Mint hint, sitting over the
 * curved-motif blobs on the frontpage. The brand wins by keeping colours
 * and typography unchanged underneath — this is a finish, not a redesign.
 */
.slt-glass-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  box-shadow:
    0 10px 32px -14px rgba(17, 45, 99, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition:
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 220ms ease,
    background-color 220ms ease;
}

.slt-glass-card::after {
  /* Hairline Mint tint at the top edge so the card reads as part of the brand. */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(225, 240, 236, 0.9) 18%,
    rgba(225, 240, 236, 0.9) 82%,
    transparent 100%
  );
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}

.slt-glass-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(17, 45, 99, 0.18);
  box-shadow:
    0 22px 56px -18px rgba(17, 45, 99, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.slt-glass-card:focus-visible {
  outline: 2px solid var(--c8-blue);
  outline-offset: 3px;
}

/* Placeholder modules (not migrated yet) read as muted but still clickable. */
.slt-glass-card--placeholder {
  background: rgba(255, 255, 255, 0.42);
  filter: saturate(0.88);
}

.slt-glass-card--placeholder:hover {
  background: rgba(255, 255, 255, 0.66);
  filter: saturate(0.96);
}