/* Name: lefred.be
   Description: lefred.be's look: slate code-textured banner, Alatsi headings, lavender buttons, and sky-blue accents.
   Partner-Logo: themes/lefred/lefred-logo.svg
   Partner-Logo-Link: https://lefred.be/
   Partner-Logo-Alt: lefred.be

   Styled after lefred.be ("tribulations of a MariaDB Community Advocate"):
   the blog's slate header banner with its faint code texture, the site
   title's sky blue (#6dafdc) for the wordmark and highlights, lavender
   (#9799bb) buttons and links that turn sky blue on hover, slate text
   (#415161) and headings (#2c3e50), soft off-white cards with a slate
   shadow, and Alatsi headings. The wordmark is "lefred.be" set in Alatsi
   and converted to outlines. Alatsi is bundled under the SIL Open Font
   License (lefred/OFL.txt). Loaded after style.css. */

/*
 * Copyright (c) 2026 MariaDB Foundation
 * SPDX-License-Identifier: GPL-2.0-only
 */
@font-face { font-family: 'Alatsi'; src: url('./lefred/alatsi-latin.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }

:root {
  --ink: #2c3e50;
  --text: #415161;
  --muted: #6b7887;
  --subtle: #4d5d6d;
  --ice: #edeff2;
  --surface: #f8f9fb;
  --paper: #ffffff;
  --card: #f8f9fb;
  --teal: #9799bb;
  --teal2: #6dafdc;
  --on-accent: #ffffff;
  --line: #e2e7ed;
  --line-strong: #d3dae2;
  --line-hover: #6dafdc;
  --accent-bg: #edeff2;
  --accent-line: #b9bbd4;
  --selected: #eef3f8;
  --sky: #6dafdc;
  --lavender: #9799bb;
  --slate: #42485a;
  --shadow: 0 12px 18px -6px rgba(65, 82, 98, .18);
  --hero-gradient: url('/assets/themes/lefred/lefred-banner.jpg') 80% 65% / cover no-repeat, #42485a;
}

h1, h2, h3, .hero__content h1, .eyebrow { font-family: 'Alatsi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; }
h1, h2, h3 { color: var(--ink); }
h2 { font-size: 1.65rem; }
.eyebrow { color: var(--sky); letter-spacing: .1em; }
a:hover { color: var(--sky); }

/* Blog-card look: off-white, borderless, a soft slate shadow. */
.card, .metrics { border: 1px solid var(--line); border-radius: 2px; background: var(--card); box-shadow: var(--shadow); }
.metrics div + div { border-left: 1px solid var(--line); }
.metrics strong { color: var(--sky); }
.server:hover, .plugin:hover { border-color: var(--sky); box-shadow: 0 16px 24px -8px rgba(65, 82, 98, .26); }

/* Lavender buttons that turn sky blue, as on the blog. */
button, .as-button { border-radius: 2px; background: var(--lavender); font-weight: 500; }
button:hover, .as-button:hover { background: var(--sky); }
.secondary, button.secondary { background: white; color: var(--slate); box-shadow: inset 0 0 0 1px var(--lavender); }
.secondary:hover, button.secondary:hover { background: var(--sky); color: white; box-shadow: none; }
button.filter-chip { border-radius: 2px; }
button.filter-chip:hover { border-color: var(--sky); color: var(--slate); }
button.filter-chip.active, button.filter-chip.active:hover { background: var(--slate); border-color: var(--slate); }
.badge { border-radius: 2px; }
.badge.neutral, .badge.queued, .badge.new { background: #e7eef6; color: #3d6f93; }
input, select, textarea { border-width: 1px; border-radius: 2px; }
input:focus, select:focus, textarea:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(109, 175, 220, .2); }
.alert { border-radius: 2px; border-left-color: var(--sky); background: #eef5fb; color: var(--ink); border-color: #c9e0f0; }
.markdown a, .small-link, .plugin-detail-author a, .breadcrumb-link { color: #6f72a0; }
.markdown a:hover, .small-link:hover, .breadcrumb-link:hover { color: var(--sky); }

/* The blog's slate banner as header and footer. */
.header-logo.partner-logo img { height: 34px; }
.login-foundation.partner-logo img { height: 34px; }
.header-wordmark { color: rgba(255, 255, 255, .78); }
.header-wordmark:hover { color: var(--sky); }
.header-wordmark .nav-badge { background: var(--sky); }
.header-btn { border-radius: 2px; }
.header-btn--solid { background: var(--lavender); color: white; }
.header-btn--solid:hover { background: var(--sky); }
.header-btn--outline { border-color: rgba(255, 255, 255, .35); background: transparent; }
.header-btn--outline:hover { border-color: var(--sky); background: transparent; color: var(--sky); }
.hero__content h1 { color: var(--sky); }
.hero-stats, .hero-cta { border-radius: 2px; border-color: rgba(255, 255, 255, .25); background: rgba(66, 72, 90, .6); }
.hero-cta:hover { border-color: var(--sky); background: rgba(109, 175, 220, .2); }
.page-breadcrumb { border-bottom: 1px solid var(--line); background: var(--surface); }
.breadcrumb-current { color: var(--ink); }
.site-footer { background: var(--slate); }
.footer-contact a, .footer-copyright a { color: var(--sky); }
.login-card { border-radius: 2px; }
.markdown pre { background: var(--slate); border-radius: 2px; }