/* ===========================================================
   Lumos shim — utility classes, theme tokens, responsive vars
   Maps Lumos framework to AlloRénov's eco-modern palette.
   In a real Webflow Lumos project, these are pre-defined.
   =========================================================== */

:root {
  /* ---- AlloRénov raw palette (private — not used directly in components) ---- */
  --forest-900: oklch(0.22 0.04 155);
  --forest-800: oklch(0.28 0.05 155);
  --forest-700: oklch(0.36 0.06 155);
  --forest-600: oklch(0.46 0.07 155);
  --forest-500: oklch(0.58 0.08 155);
  --forest-400: oklch(0.72 0.07 155);
  --forest-300: oklch(0.82 0.05 152);
  --forest-200: oklch(0.88 0.04 155);
  --forest-100: oklch(0.94 0.025 150);
  --forest-50:  oklch(0.97 0.012 145);
  --cream-50:   oklch(0.985 0.008 95);
  --cream-100:  oklch(0.965 0.012 90);
  --cream-200:  oklch(0.93 0.018 88);
  --sand-300:   oklch(0.86 0.03 85);
  --sand-400:   oklch(0.78 0.045 80);
  --yellow-500: oklch(0.83 0.15 92);
  --yellow-400: oklch(0.88 0.13 95);
  --yellow-300: oklch(0.93 0.10 95);
  --ink-900: oklch(0.18 0.012 60);
  --ink-700: oklch(0.34 0.012 60);
  --ink-500: oklch(0.52 0.012 60);
  --ink-400: oklch(0.66 0.010 60);
  --ink-300: oklch(0.80 0.008 60);
  --ink-200: oklch(0.88 0.008 60);

  /* ---- Theme — Light (default) ---- */
  --_theme---background: var(--cream-50);
  --_theme---background-2: var(--forest-100);
  --_theme---background-skeleton: var(--cream-200);
  --_theme---text: var(--ink-900);
  --_theme---text-muted: var(--ink-500);
  --_theme---text-soft: var(--ink-700);
  --_theme---border: var(--ink-300);
  --_theme---border-soft: var(--ink-200);
  --_theme---accent: var(--yellow-400);
  --_theme---accent-soft: var(--yellow-300);
  --_theme---accent-text: var(--forest-900);
  --_theme---highlight: var(--forest-700);
  --_theme---highlight-soft: var(--forest-100);

  --_theme---text-link--text: var(--forest-700);
  --_theme---text-link--text-hover: var(--forest-900);
  --_theme---text-link--border: var(--forest-700);
  --_theme---text-link--border-hover: var(--forest-900);

  --_theme---button-primary--background: var(--forest-800);
  --_theme---button-primary--background-hover: var(--forest-700);
  --_theme---button-primary--text: var(--cream-50);
  --_theme---button-primary--text-hover: var(--cream-50);
  --_theme---button-primary--border: var(--forest-800);
  --_theme---button-primary--border-hover: var(--forest-700);

  --_theme---button-secondary--background: transparent;
  --_theme---button-secondary--background-hover: var(--forest-800);
  --_theme---button-secondary--text: var(--forest-800);
  --_theme---button-secondary--text-hover: var(--cream-50);
  --_theme---button-secondary--border: var(--forest-800);
  --_theme---button-secondary--border-hover: var(--forest-800);

  --_theme---button-accent--background: var(--yellow-400);
  --_theme---button-accent--background-hover: var(--yellow-500);
  --_theme---button-accent--text: var(--forest-900);
  --_theme---button-accent--text-hover: var(--forest-900);
  --_theme---button-accent--border: var(--yellow-400);
  --_theme---button-accent--border-hover: var(--yellow-500);

  /* ---- Spacing ---- */
  --_spacing---space--1: 0.25rem;
  --_spacing---space--2: 0.5rem;
  --_spacing---space--3: 0.75rem;
  --_spacing---space--4: 1rem;
  --_spacing---space--5: 1.5rem;
  --_spacing---space--6: 2rem;
  --_spacing---space--7: 3rem;
  --_spacing---space--8: 4rem;
  --_spacing---space--9: 6rem;

  --_spacing---section-space--none: 0;
  --_spacing---section-space--small: 3rem;
  --_spacing---section-space--main: 5rem;
  --_spacing---section-space--large: 7rem;
  --_spacing---section-space--page-top: 6rem;

  --max-width--small: 50rem;
  --max-width--main: 90rem;
  --max-width--full: 100%;

  --site--margin: 2rem;
  --site--gutter: 1.5rem;

  --radius--small: 0.375rem;
  --radius--main: 0.625rem;
  --radius--large: 1rem;
  --radius--xl: 1.5rem;
  --radius--round: 999px;

  --border-width--main: 1px;
  --border-width--thick: 1.5px;

  /* ---- Typography ---- */
  --_typography---font--primary: "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --_typography---font--display: "Instrument Serif", "Times New Roman", serif;
  --_typography---font--mono: "JetBrains Mono", ui-monospace, monospace;
  --_typography---font--primary-regular: 400;
  --_typography---font--primary-medium: 500;
  --_typography---font--primary-bold: 700;
  --_typography---letter-spacing--tight: -0.02em;
  --_typography---letter-spacing--mono: 0.08em;
  --_text-style---margin-bottom: 0.65em;

  /* ---- Easing ---- */
  --_motion---ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Responsive flags (large by default) ---- */
  --_responsive---large: 1;
  --_responsive---medium: 0;
  --_responsive---small: 0;
  --_responsive---xsmall: 0;

  /* ---- Trigger / state (defaults) ---- */
  --_state---true: 1;
  --_state---false: 0;
  --_trigger---on: 0;
  --_trigger---off: 1;

  /* nav offset for sticky things */
  --nav--height-total: 4rem;
}

/* ---- Trigger wiring (framework layer — emulates Lumos data-trigger) ----
   Flips --_trigger---on/off on hover/focus so component CSS reads the
   variables (additive model: on=0 at rest, on=1 when triggered). */
[data-trigger~="hover"]:hover,
[data-trigger~="focus"]:focus-visible,
[data-trigger~="focus"]:focus-within {
  --_trigger---on: 1;
  --_trigger---off: 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-trigger] { transition: none !important; }
}

/* ---- State wiring (framework layer — emulates Lumos .is-active) ----
   At rest --_state---true=1 / --_state---false=0 (the :root defaults).
   Activating an element flips them, so component CSS can read
   var(--_state---true|false) without ever selecting .is-active itself. */
.is-active {
  --_state---true: 0;
  --_state---false: 1;
}

/* ---- Responsive breakpoints ---- */
@media (max-width: 50em) {
  :root {
    --_responsive---large: 0;
    --_responsive---medium: 1;
    --flex-medium: flex;
    --column-medium: column;
    --row-medium: row;
    --start-medium: flex-start;
    --center-medium: center;
    --end-medium: flex-end;
    --none-medium: none;
    --unset-medium: unset;
    --relative-medium: relative;
    --first-medium: -1;
    --last-medium: 99;
  }
}
@media (max-width: 35em) {
  :root {
    --_responsive---medium: 0;
    --_responsive---small: 1;
    --flex-small: flex;
    --column-small: column;
    --start-small: flex-start;
    --center-small: center;
    --none-small: none;
    --unset-small: unset;
  }
}
@media (max-width: 20em) {
  :root {
    --_responsive---small: 0;
    --_responsive---xsmall: 1;
  }
}

/* ---- Themes ---- */
.u-theme-light {
  /* same as :root defaults */
}
.u-theme-dark {
  --_theme---background: var(--forest-900);
  --_theme---background-2: var(--forest-800);
  --_theme---background-skeleton: var(--forest-700);
  --_theme---text: var(--cream-100);
  --_theme---text-muted: oklch(0.72 0.03 145);
  --_theme---text-soft: oklch(0.82 0.025 145);
  --_theme---border: color-mix(in oklch, var(--cream-50) 18%, transparent);
  --_theme---border-soft: color-mix(in oklch, var(--cream-50) 10%, transparent);
  --_theme---accent: var(--yellow-400);
  --_theme---accent-soft: var(--yellow-300);
  --_theme---accent-text: var(--forest-900);
  --_theme---highlight: var(--yellow-400);
  --_theme---highlight-soft: color-mix(in oklch, var(--yellow-400) 14%, transparent);

  --_theme---text-link--text: var(--yellow-400);
  --_theme---text-link--text-hover: var(--yellow-300);

  --_theme---button-primary--background: var(--yellow-400);
  --_theme---button-primary--background-hover: var(--yellow-500);
  --_theme---button-primary--text: var(--forest-900);
  --_theme---button-primary--text-hover: var(--forest-900);
  --_theme---button-primary--border: var(--yellow-400);
  --_theme---button-primary--border-hover: var(--yellow-500);

  --_theme---button-secondary--background: transparent;
  --_theme---button-secondary--background-hover: var(--cream-50);
  --_theme---button-secondary--text: var(--cream-50);
  --_theme---button-secondary--text-hover: var(--forest-900);
  --_theme---button-secondary--border: color-mix(in oklch, var(--cream-50) 45%, transparent);
  --_theme---button-secondary--border-hover: var(--cream-50);
}
.u-theme-brand {
  --_theme---background: var(--forest-700);
  --_theme---background-2: var(--forest-600);
  --_theme---text: var(--cream-50);
  --_theme---text-muted: oklch(0.82 0.04 145);
  --_theme---text-soft: oklch(0.88 0.03 145);
  --_theme---border: color-mix(in oklch, var(--cream-50) 22%, transparent);
  --_theme---accent: var(--yellow-300);
  --_theme---highlight: var(--yellow-300);
}
.u-theme-cream {
  --_theme---background: var(--cream-100);
  --_theme---background-2: var(--cream-200);
  --_theme---highlight-soft: color-mix(in oklch, var(--forest-100) 70%, var(--cream-100));
}

/* ---- Section / Container scaffolding ---- */
.u-section {
  display: flex;
  flex-flow: column;
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  padding-top: var(--_spacing---section-space--main);
  padding-bottom: var(--_spacing---section-space--main);
  position: relative;
}
.u-section.is-page-top {
  padding-top: var(--_spacing---section-space--page-top);
}
.u-section.is-small {
  padding-top: var(--_spacing---section-space--small);
  padding-bottom: var(--_spacing---section-space--small);
}
.u-container {
  max-width: var(--max-width--main);
  width: calc(100% - var(--site--margin) * 2);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-flow: column;
  container-type: inline-size;
  gap: var(--_spacing---space--8);
}
.u-container.is-narrow { max-width: var(--max-width--small); }

/* ---- Helpers ---- */
.u-margin-trim > :first-child { margin-top: 0; }
.u-margin-trim > :last-child { margin-bottom: 0; }
.u-display-none { display: none !important; }
.u-hide-large { display: none; }
@media (max-width: 50em) { .u-hide-large { display: unset; } }
.u-hide-medium { display: var(--none-medium, unset); }
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.u-button-wrapper {
  display: flex; flex-wrap: wrap;
  gap: var(--_spacing---space--3);
  align-items: center;
  justify-content: inherit;
}
.u-alignment-center {
  text-align: center;
  justify-content: center;
  align-items: center;
}
.u-heading, .u-text {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  align-items: inherit;
  justify-content: inherit;
}
.u-heading > *, .u-text > * { max-width: inherit; margin: 0; }

/* ---- Typography utilities ---- */
.u-text-style-display {
  font-family: var(--_typography---font--display);
  font-weight: var(--_typography---font--primary-regular);
  font-size: clamp(2.75rem, 6.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.u-text-style-h1 {
  font-family: var(--_typography---font--display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.012em;
}
.u-text-style-h2 {
  font-family: var(--_typography---font--display);
  font-weight: 400;
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.u-text-style-h3 {
  font-family: var(--_typography---font--primary);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.u-text-style-h4 {
  font-family: var(--_typography---font--primary);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.u-text-style-h5 {
  font-family: var(--_typography---font--primary);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
}
.u-text-style-serif {
  font-family: var(--_typography---font--display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.u-text-style-large {
  font-size: 1.125rem;
  line-height: 1.5;
}
.u-text-style-main {
  font-size: 1rem;
  line-height: 1.55;
}
.u-text-style-small {
  font-size: 0.875rem;
  line-height: 1.5;
}
.u-text-style-tag {
  font-family: var(--_typography---font--mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.u-text-style-mono {
  font-family: var(--_typography---font--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

/* italic + accent helpers — Instrument Serif italic is the design signature */
.u-italic { font-style: italic; }
.u-accent-italic { font-style: italic; color: var(--_theme---highlight); }

/* ---- Body baseline ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--_typography---font--primary);
  font-size: 1rem;
  line-height: 1.55;
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--yellow-400); color: var(--forest-900); }

/* image / video defaults */
img, video { display: block; max-width: 100%; }
img { width: 100%; object-fit: cover; }

/* trim default button styling so component classes own the look */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }