/* INTAG in daylight: ivory paper, forest ink and a fired-clay intersection.
   Local semantic mappings preserve the delivered, generated brand tokens. */
.theme-icon--moon { display: none; }
[data-theme="light"] .theme-icon--sun { display: none; }
[data-theme="light"] .theme-icon--moon { display: block; }
[data-theme="light"] {
  --intag-color-surface-page: var(--intag-sand-50);
  --intag-color-surface-raised: var(--intag-white);
  --intag-color-surface-sunken: color-mix(in srgb, var(--intag-sand-50) 62%, var(--intag-sand-100));
  --intag-color-border-subtle: color-mix(in srgb, var(--intag-forest-750) 24%, var(--intag-sand-50));
  --light-paper: var(--intag-sand-50);
  --light-mint: color-mix(in srgb, var(--intag-forest-50) 45%, var(--light-paper));
  --light-warm: color-mix(in srgb, var(--intag-apricot-100) 38%, var(--light-paper));
  --light-focus: var(--intag-forest-750);
  --field-read: var(--light-paper);
  --art-ground: var(--light-paper);
  scrollbar-color: var(--intag-forest-500) var(--light-paper);
}

/* The original lattice shares the opening's ambient, scroll and pointer motion. */
[data-theme="light"] .masthead__pointer::before {
  background-image: url('../patterns/INTAG_Pattern_Lattice_Light_Overlay.svg'), linear-gradient(120deg, var(--intag-color-surface-page), var(--intag-color-action-secondary-bg));
  background-position: center;
  background-size: 96px 96px, cover;
}
[data-theme="light"] .masthead::after {
  /* Keep the lattice present across the ivory area, with a light reading veil. */
  background: linear-gradient(90deg, color-mix(in srgb, var(--field-read) 30%, transparent), color-mix(in srgb, var(--field-read) 24%, transparent) 60%, color-mix(in srgb, var(--field-read) 10%, transparent)), linear-gradient(0deg, var(--field-read), transparent 10%);
}
[data-theme="light"] .hero__title span + span { color: var(--intag-forest-700); }
[data-theme="light"] .hero__support,
[data-theme="light"] .hero__fine { color: var(--intag-color-text-secondary); }

/* Clear paper surfaces and a quiet, legible masthead at every scroll position. */
[data-theme="light"] .site-head,
[data-theme="light"].motion-stopped .site-head { background: var(--light-paper); }
[data-theme="light"] .site-head__nav a { color: var(--intag-color-text-primary); }
[data-theme="light"] .theme-toggle,
[data-theme="light"] .menu-toggle {
  color: var(--intag-color-text-primary);
  border-color: color-mix(in srgb, var(--intag-forest-750) 42%, var(--light-paper));
  background: var(--intag-color-surface-raised);
}
[data-theme="light"] .theme-toggle:hover,
[data-theme="light"] .menu-toggle:hover,
[data-theme="light"] .menu-toggle[aria-expanded="true"] {
  background: var(--light-mint);
  border-color: var(--intag-color-border-strong);
}
[data-theme="light"] :where(a, button):focus-visible { outline-color: var(--light-focus); }
[data-theme="light"] .btn--primary:hover { background: var(--intag-forest-750); }
[data-theme="light"] .text-link:hover { color: var(--intag-color-text-accent); }
[data-theme="light"] .hero .text-link:hover { color: var(--intag-color-text-primary); }

[data-theme="light"] .build,
[data-theme="light"] .security { background: var(--intag-color-surface-raised); }
[data-theme="light"] .process { background: var(--light-mint); }
[data-theme="light"] .book { background: var(--light-warm); }
[data-theme="light"] .step__ord { color: var(--intag-forest-600); }
[data-theme="light"] .map__glyph { color: var(--intag-forest-700); }
[data-theme="light"] .path li::before { background: var(--intag-forest-600); }
[data-theme="light"] .site-foot { background: var(--intag-color-surface-raised); }

/* Separate the two sets from their ground; the warm overlap remains the focal point. */
[data-theme="light"] .pinwrap {
  --set-first: var(--intag-forest-500);
  --set-second: var(--intag-forest-300);
  --set-overlap: var(--intag-terracotta-700);
  --stage-ground: var(--light-paper);
}
[data-theme="light"] .pin__field {
  background-image: radial-gradient(ellipse at 80% 20%, var(--intag-forest-100), transparent 65%), radial-gradient(ellipse at 10% 80%, var(--intag-apricot-100), transparent 65%);
}
[data-theme="light"] .pin__field::before { opacity: .18; }
[data-theme="light"] .pin__title { font-weight: 300; }
[data-theme="light"] .pin__kicker { color: var(--intag-color-text-accent); }

@media (max-width: 1099px) {
  [data-theme="light"] .masthead::after {
    background: linear-gradient(color-mix(in srgb, var(--field-read) 35%, transparent), color-mix(in srgb, var(--field-read) 35%, transparent)), linear-gradient(0deg, var(--field-read), transparent 10%);
  }
  [data-theme="light"] .site-head__nav { background: var(--intag-color-surface-raised); }
  [data-theme="light"] .site-head__nav a:hover,
  [data-theme="light"] .site-head__nav a:focus-visible { color: var(--intag-color-text-accent); }
  [data-theme="light"] .pin__copy { background: var(--stage-ground); }
}
@media (prefers-contrast: more) {
  [data-theme="light"] { --intag-color-border-subtle: var(--intag-color-border-strong); }
  [data-theme="light"] .hero__support,
  [data-theme="light"] .hero__fine { color: var(--intag-color-text-primary); }
}
@media (forced-colors: active) {
  [data-theme="light"] .theme-toggle,
  [data-theme="light"] .menu-toggle,
  [data-theme="light"] .site-head,
  [data-theme="light"] .site-head__nav { background: Canvas; color: CanvasText; border-color: ButtonText; }
  [data-theme="light"] .btn--primary:hover { background: Highlight; color: HighlightText; }
  [data-theme="light"] :where(a, button):focus-visible { outline-color: Highlight; }
}