/*
 * LCA design tokens — single source of truth.
 *
 * Ported from the redesign concept (redesign-vision/src/styles.css), where the
 * values are authored in oklch. Hex equivalents below were converted and then
 * verified against the browser's own computed sRGB output, so they match the
 * concept exactly.
 *
 * Elementor's colour picker can't take oklch, so the hex values are canonical
 * here and the Global Colours in the Elementor kit point at the same numbers.
 */

:root {
  /* Dark — the site's default skin */
  --lca-bg:            #0C0806;
  --lca-fg:            #F3F1EE;
  --lca-surface:       #15110D;
  --lca-surface-2:     #1F1915;
  --lca-card:          #15110D;
  --lca-muted:         #241E1A;
  --lca-muted-fg:      #9D9790;
  --lca-accent:        #FA6E1D;  /* primary orange — CTAs, links, marker dots */
  --lca-accent-amber:  #F97E00;  /* serif italic highlights */
  --lca-destructive:   #F52027;

  /* Borders are alpha, not flat colour — they must sit over both skins */
  --lca-border:        rgb(255 255 255 / 10%);
  --lca-input:         rgb(255 255 255 / 12%);

  /* Type */
  --lca-font-display:  "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --lca-font-sans:     "Inter", ui-sans-serif, system-ui, sans-serif;
  --lca-font-serif:    "Instrument Serif", ui-serif, Georgia, serif;

  /* Geometry — the concept is deliberately near-square */
  --lca-radius:        0.25rem;
  --lca-maxw:          1440px;
}

/*
 * Light bands. The concept alternates dark and light sections down the page by
 * re-declaring the same tokens on a wrapper, so any component inside works in
 * either skin without knowing which one it's in. In Elementor, add the
 * `section-light` class to a Section/Container to flip that band.
 */
.section-light {
  --lca-bg:            #FBFAF8;
  --lca-fg:            #14110E;
  --lca-surface:       #F1F0ED;
  --lca-surface-2:     #E6E4E1;
  --lca-card:          #FFFFFF;
  --lca-muted:         #ECEBE8;
  --lca-muted-fg:      #595450;
  --lca-accent-amber:  #C84F00;  /* darkened for contrast on light */
  --lca-border:        rgb(20 17 14 / 14%);
  --lca-input:         rgb(20 17 14 / 16%);

  background-color: var(--lca-bg);
  color: var(--lca-fg);
}

/* ---------------------------------------------------------------- Base ---- */

body.lca {
  background-color: var(--lca-bg);
  color: var(--lca-fg);
  font-family: var(--lca-font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

.lca h1, .lca h2, .lca h3, .lca h4 {
  font-family: var(--lca-font-display);
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------ Utilities ---- */

/* Small uppercase label above a heading. */
.lca-eyebrow {
  font-family: var(--lca-font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lca-muted-fg);
  font-weight: 500;
}

/* The orange dot that precedes eyebrows throughout the concept. */
.lca-marker-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--lca-accent);
  margin-right: 0.625rem;
  vertical-align: 0.15em;
}

/* Italic serif emphasis — "Light with *intention*". */
.lca-italic-serif {
  font-family: var(--lca-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.lca-hairline { border-top: 1px solid var(--lca-border); }

/* Subtle dot grain over hero imagery. */
.lca-grain { position: relative; }
.lca-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* ------------------------------------------------------- Logo marquee ---- */

.lca-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.lca-marquee__track {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  width: max-content;
  animation: lca-marquee-scroll 38s linear infinite;
}

.lca-marquee__track--slow { gap: 1rem; animation-duration: 60s; }
.lca-marquee:hover .lca-marquee__track { animation-play-state: paused; }

@keyframes lca-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lca-marquee__track { animation: none; }
}