/*
  Theme CSS:   fabi-theme.css
  Version:     2.0.0
  Updated:     2026-08-02
  Description: Fabi 2026 design tokens (Lilla-variant) and shared layout/type/button/effect
               classes. Loaded LAST from base.html so it wins over the boilerplate
               main.css/theme-overrides.css.
  Dependencies: theme.fabi_colors / fabi_fonts / fabi_type / fabi_layout (root fields.json),
                Crimson Pro + Work Sans (Google Fonts, loaded in base.html).
                Reference: design-reference/fabi/ (brand-info page from the Fabi design system).

  Changelog:
  2.0.0 (2026-08-02) — BREAKING: replaced placeholder tokens with the real Fabi brand system
                       (token names now match the design reference: green/aubergine/fabired/
                       mint/warm/beige*/ink/mutedgreen/burgundy/bluegray). Added gradient,
                       shadow, grain, dot and motion tokens + full brand button set.
                       No pages were built on 1.x, so nothing breaks in practice.
  1.0.0 (2026-08-02) — Initial release (neutral placeholder tokens)
*/



:root {
  /* ---- Color tokens (names match the Fabi design system) ---- */
  --fabi-green: #2A2343;           /* Fabi-lilla — primary dark */
  --fabi-aubergine: #211B36;   /* deepest surface / dark hover */
  --fabi-red: #A6192E;           /* CTA / accents / logo dot */
  --fabi-mint: #A99CE0;             /* lavender accent on dark */
  --fabi-warm: #FFFFFF;             /* page background / text on dark */
  --fabi-beige25: #F2F0EA;       /* secondary section surface */
  --fabi-beige50: #E4DFD3;       /* details */
  --fabi-beige: #CAC1A9;           /* scrollbar, edges */
  --fabi-lightbeige: #DDD5E2; /* image placeholders */
  --fabi-ink: #404040;               /* body text */
  --fabi-mutedgreen: #8B82A6; /* muted lavender */
  --fabi-burgundy: #791823;     /* hover on fabi-red */
  --fabi-bluegray: #293349;     /* reserve */

  /* ---- Derived hairlines / common tints ---- */
  --fabi-line: color-mix(in srgb, var(--fabi-green) 12%, transparent);        /* borders on light */
  --fabi-line-strong: color-mix(in srgb, var(--fabi-green) 20%, transparent); /* chips on light */
  --fabi-line-on-dark: color-mix(in srgb, var(--fabi-warm) 25%, transparent); /* borders on dark */
  --fabi-ink-muted: color-mix(in srgb, var(--fabi-ink) 65%, transparent);     /* secondary text */
  --fabi-ink-soft: color-mix(in srgb, var(--fabi-ink) 55%, transparent);      /* captions */
  --fabi-warm-muted: color-mix(in srgb, var(--fabi-warm) 75%, transparent);   /* lead on dark */
  --fabi-warm-soft: color-mix(in srgb, var(--fabi-warm) 55%, transparent);    /* captions on dark */

  /* ---- Gradient recipes (overlays over photos — never as flat surfaces) ---- */
  --fabi-grad-hero-v: linear-gradient(180deg,
    color-mix(in srgb, var(--fabi-green) 45%, transparent) 0%,
    color-mix(in srgb, var(--fabi-green) 35%, transparent) 28%,
    color-mix(in srgb, var(--fabi-green) 92%, transparent) 100%);
  --fabi-grad-hero-h: linear-gradient(95deg,
    color-mix(in srgb, var(--fabi-green) 90%, transparent) 0%,
    color-mix(in srgb, var(--fabi-green) 55%, transparent) 42%,
    color-mix(in srgb, var(--fabi-green) 5%, transparent) 72%);
  --fabi-grad-card: linear-gradient(180deg,
    color-mix(in srgb, var(--fabi-green) 5%, transparent),
    color-mix(in srgb, var(--fabi-green) 55%, transparent));
  --fabi-grad-editorial: linear-gradient(180deg,
    color-mix(in srgb, var(--fabi-green) 10%, transparent),
    color-mix(in srgb, var(--fabi-green) 32%, transparent));
  --fabi-grad-portrait: linear-gradient(160deg,
    color-mix(in srgb, var(--fabi-green) 92%, transparent),
    var(--fabi-green) 60%,
    var(--fabi-aubergine));
  --fabi-grad-glow: radial-gradient(circle, var(--fabi-mint), transparent 70%);
  --fabi-grad-glass: linear-gradient(160deg,
    color-mix(in srgb, var(--fabi-warm) 5%, transparent),
    color-mix(in srgb, var(--fabi-warm) 2%, transparent));

  /* ---- Shadows ---- */
  --fabi-shadow-lift: 0 22px 55px -34px color-mix(in srgb, var(--fabi-green) 30%, transparent);
  --fabi-shadow-btn: 0 14px 34px -12px color-mix(in srgb, var(--fabi-red) 60%, transparent);
  --fabi-shadow-btn-dark: 0 14px 34px -14px color-mix(in srgb, #000000 40%, transparent);

  /* ---- Motion ---- */
  --fabi-ease: cubic-bezier(0.16, 0.84, 0.34, 1);
  --fabi-reveal-distance: 26px;   /* reveal: 26px up, 1.05s */
  --fabi-reveal-duration: 1.05s;

  /* ---- Type ---- */
  --fabi-size-h1: 93px;
  --fabi-size-h2: 66px;
  --fabi-size-card: 28px;
  --fabi-size-lead: 20px;
  --fabi-size-body: 17px;
  --fabi-size-eyebrow: 13px;
  --fabi-font-display: 'Crimson Pro', Georgia, serif;
  --fabi-font-body: 'Work Sans', Arial, sans-serif;
  --fabi-font-mono: ui-monospace, Menlo, monospace;

  /* ---- Layout ---- */
  --fabi-content-width: 1280px;
  --fabi-side-padding: 40px;
  --fabi-section-padding: 96px;
  --fabi-radius-card: 6px;
  --fabi-radius-panel: 16px;
  --fabi-radius-btn: 999px;
}

/* Page base. Root font-size drives the rem-based details (buttons, chips, labels) exactly
   like the design system's 17.5px base. overflow-x:clip (NOT hidden) keeps position:sticky
   working while horizontal bleed is clipped. */
html {
  background: var(--fabi-warm);
  font-size: 17.5px;
}
@media (max-width: 640px) {
  html {
    font-size: 16px;
  }
}
body {
  background: var(--fabi-warm);
  font-family: var(--fabi-font-body);
  font-size: var(--fabi-size-body);
  color: var(--fabi-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
  overflow-x: clip;
}
::selection {
  background: var(--fabi-red);
  color: var(--fabi-warm);
}
/* Brand scrollbar (beige on light beige) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--fabi-beige25);
}
::-webkit-scrollbar-thumb {
  background: var(--fabi-beige);
  border-radius: 999px;
}
a {
  color: var(--fabi-green);
}
a:hover {
  color: var(--fabi-red);
}

/* ---------- Shared layout + type helpers ---------- */

.fabi-wrap {
  max-width: var(--fabi-content-width);
  margin: 0 auto;
  padding: 0 var(--fabi-side-padding);
}
/* Eyebrow: 0.72rem, 0.18em tracking, uppercase, with 18x2px bar. Red on light (default),
   use .fabi-ey--mint on dark surfaces. */
.fabi-ey {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fabi-font-body);
  font-size: var(--fabi-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fabi-red);
}
.fabi-ey__line {
  display: inline-block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.fabi-ey--mint {
  color: var(--fabi-mint);
}
.fabi-h1 {
  font-family: var(--fabi-font-display);
  font-weight: 500;
  font-size: clamp(47px, 7vw, var(--fabi-size-h1));
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--fabi-green);
  margin: 0;
}
.fabi-h2 {
  font-family: var(--fabi-font-display);
  font-weight: 500;
  font-size: clamp(39px, 5vw, var(--fabi-size-h2));
  line-height: 1.03;
  letter-spacing: -0.01em;
  color: var(--fabi-green);
  margin: 0;
}
.fabi-card-title {
  font-family: var(--fabi-font-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, var(--fabi-size-card));
  line-height: 1.25;
  color: var(--fabi-green);
  margin: 0;
}
.fabi-lead {
  font-size: var(--fabi-size-lead);
  color: var(--fabi-ink-muted);
  line-height: 1.65;
  font-weight: 300;
}
/* Payoff — always italic serif; mint on dark surfaces */
.fabi-payoff {
  font-family: var(--fabi-font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--fabi-mint);
}
/* Mono details: numbering, phone numbers, contact info */
.fabi-mono {
  font-family: var(--fabi-font-mono);
  font-size: 0.85rem;
}

/* ---------- Shared buttons (pill, Work Sans 500, 0.95rem, arrow gap 10px) ---------- */
/* :hover/:focus restated with class+pseudo (0-2-0) so the boilerplate's bare
   a:hover/button:hover rules (0-1-1) in theme-overrides.css can never bleed in. */

.fabi-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--fabi-red);
  color: var(--fabi-warm);
  border: none;
  border-radius: var(--fabi-radius-btn);
  font-family: var(--fabi-font-body);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s var(--fabi-ease);
}
.fabi-btn:hover,
.fabi-btn:focus {
  background: var(--fabi-burgundy);
  color: var(--fabi-warm);
  border: none;
  text-decoration: none;
  font-weight: 500;
  box-shadow: var(--fabi-shadow-btn);
}
/* Outline — secondary choice on light surfaces */
.fabi-btn--outline {
  background: transparent;
  color: var(--fabi-ink);
  border: 1px solid color-mix(in srgb, var(--fabi-ink) 30%, transparent);
}
.fabi-btn--outline:hover,
.fabi-btn--outline:focus {
  background: transparent;
  color: var(--fabi-red);
  border: 1px solid var(--fabi-red);
  box-shadow: none;
}
/* Light — main choice on dark surfaces */
.fabi-btn--light {
  background: var(--fabi-warm);
  color: var(--fabi-aubergine);
  border: none;
}
.fabi-btn--light:hover,
.fabi-btn--light:focus {
  background: var(--fabi-warm);
  color: var(--fabi-aubergine);
  border: none;
  box-shadow: var(--fabi-shadow-btn-dark);
}
/* Dark — dark button with light border, on dark surfaces */
.fabi-btn--dark {
  background: var(--fabi-green);
  color: var(--fabi-warm);
  border: 1px solid var(--fabi-line-on-dark);
}
.fabi-btn--dark:hover,
.fabi-btn--dark:focus {
  background: var(--fabi-aubergine);
  color: var(--fabi-warm);
  border: 1px solid color-mix(in srgb, var(--fabi-warm) 40%, transparent);
  box-shadow: none;
}
/* Ghost — read-more link with underline */
.fabi-textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--fabi-green);
  font-family: var(--fabi-font-body);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.5s var(--fabi-ease);
}
.fabi-textlink__text {
  border-bottom: 1px solid color-mix(in srgb, var(--fabi-green) 40%, transparent);
  padding-bottom: 4px;
}
.fabi-textlink:hover,
.fabi-textlink:focus {
  color: var(--fabi-red);
  text-decoration: none;
  font-weight: 500;
}

/* ---------- Brand elements ---------- */

/* Chips: pill with dot marker */
.fabi-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--fabi-line-strong);
  font-family: var(--fabi-font-body);
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--fabi-ink) 75%, transparent);
}
.fabi-chip--on-dark {
  border-color: var(--fabi-line-on-dark);
  color: color-mix(in srgb, var(--fabi-warm) 85%, transparent);
}
/* Dot motif from the logo — marker in lists, chips and active states */
.fabi-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fabi-green);
  flex: none;
}
.fabi-dot--sm {
  width: 6px;
  height: 6px;
}
.fabi-dot--red {
  background: var(--fabi-red);
}
.fabi-dot--mint {
  background: var(--fabi-mint);
}
.fabi-dot--muted {
  background: var(--fabi-mutedgreen);
}
@keyframes fabi-dotpulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}
.fabi-dot--pulse {
  animation: fabi-dotpulse 3.4s ease-in-out infinite;
}

/* Lift shadow on hover (cards) */
.fabi-lift {
  transition: transform 0.5s var(--fabi-ease), box-shadow 0.5s var(--fabi-ease);
}
.fabi-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--fabi-shadow-lift);
}

/* Film grain — 5% multiply noise over photos and dark surfaces. Apply the class on the
   media wrapper; the overlay is a ::after so the markup stays untouched. */
.fabi-grain {
  position: relative;
}
.fabi-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background: repeating-conic-gradient(
    color-mix(in srgb, var(--fabi-green) 35%, transparent) 0% 0.0001%,
    transparent 0.0002% 0.0004%);
}

@media (prefers-reduced-motion: reduce) {
  .fabi-btn,
  .fabi-textlink,
  .fabi-lift {
    transition: none;
  }
  .fabi-lift:hover {
    transform: none;
  }
  .fabi-dot--pulse {
    animation: none;
  }
}