/* TAMRA site-wide colour system. Loaded last on every public page. */
:root {
  color-scheme: dark;
  --theme-bg: #0b0b0a;
  --theme-bg-soft: #131210;
  --theme-surface: #1c1a17;
  --theme-surface-raised: #24211d;
  --theme-text: #f4f0e9;
  --theme-text-soft: #cfc8bc;
  --theme-muted: #9d958a;
  --theme-border: rgba(244, 240, 233, 0.14);
  --theme-border-strong: rgba(244, 240, 233, 0.25);
  --theme-glass: rgba(20, 18, 16, 0.82);
  --theme-input: rgba(255, 255, 255, 0.05);
  --theme-overlay: rgba(6, 5, 4, 0.76);
  --theme-shadow: rgba(0, 0, 0, 0.55);
  --theme-accent: #d29a63;
  --theme-accent-strong: #b4713c;
  --theme-accent-deep: #9a6034;
  --theme-accent-soft: #f6dcc0;
  --theme-danger: #f0a08c;
  --theme-success: #73b98c;
}

html[data-theme="light"] {
  color-scheme: light;
  --theme-bg: #f7f4ee;
  --theme-bg-soft: #eee9e0;
  --theme-surface: #fffdf9;
  --theme-surface-raised: #ffffff;
  --theme-text: #211e1a;
  --theme-text-soft: #575149;
  --theme-muted: #706960;
  --theme-border: rgba(33, 30, 26, 0.14);
  --theme-border-strong: rgba(33, 30, 26, 0.25);
  --theme-glass: rgba(255, 253, 249, 0.9);
  --theme-input: rgba(33, 30, 26, 0.045);
  --theme-overlay: rgba(24, 21, 18, 0.62);
  --theme-shadow: rgba(45, 36, 27, 0.2);
  --theme-accent: #9a6034;
  --theme-accent-strong: #7c4a25;
  --theme-accent-deep: #63391e;
  --theme-accent-soft: #7c4a25;
  --theme-danger: #a33d2d;
  --theme-success: #2f7550;

  --bg: var(--theme-bg);
  --fg: var(--theme-text);
  --ink: var(--theme-text);
  --ink-2: var(--theme-bg-soft);
  --ink-3: var(--theme-surface);
  --ivory: var(--theme-text);
  --ivory-dim: var(--theme-text-soft);
  --muted: var(--theme-muted);
  --copper: var(--theme-accent-strong);
  --copper-light: var(--theme-accent);
  --copper-deep: var(--theme-accent-deep);
  --line: var(--theme-border);
  --line-dark: var(--theme-border);
  --cu1: var(--theme-accent);
  --cu2: var(--theme-accent-strong);
  --cu3: var(--theme-accent-soft);
  --glass: var(--theme-glass);
}

html,
body {
  background: var(--theme-bg);
  color: var(--theme-text);
}
body,
.section,
.f2,
.h5-foot,
.h5-nav,
.card,
input,
select,
textarea,
button,
a {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0.35s;
  transition-timing-function: var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* Shared theme control */
.theme-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  margin-left: clamp(0.75rem, 1.4vw, 1.25rem);
  border: 1px solid var(--theme-border-strong);
  border-radius: 50%;
  background: var(--theme-glass);
  color: var(--theme-text);
  box-shadow: 0 8px 24px -16px var(--theme-shadow);
  cursor: pointer;
  isolation: isolate;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--theme-accent);
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 13%, transparent);
}
.theme-toggle:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 3px; }
.theme-toggle svg { position: absolute; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s, transform .4s var(--ease, ease); }
.theme-toggle__sun { opacity: 0; transform: rotate(-35deg) scale(.65); }
.theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .theme-toggle__sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .theme-toggle__moon { opacity: 0; transform: rotate(35deg) scale(.65); }

/* Header and dropdowns */
.h5-nav,
.h5-foot {
  --ink: var(--theme-text);
  --mut: var(--theme-muted);
  --cu1: var(--theme-accent);
  --cu2: var(--theme-accent-strong);
  --cu3: var(--theme-accent-soft);
  --line: var(--theme-border);
  --glass: var(--theme-glass);
  color: var(--theme-text);
}
.h5-foot { background: var(--theme-bg-soft); }
.h5-nav.is-solid { background: var(--theme-glass); border-color: var(--theme-border); box-shadow: 0 10px 30px -18px var(--theme-shadow); }
.h5-dd__menu { background: color-mix(in srgb, var(--theme-surface) 96%, transparent); border-color: var(--theme-border); box-shadow: 0 22px 50px -20px var(--theme-shadow); }
.h5-dd__menu a:hover,
.h5-dd__menu a:focus-visible { background: color-mix(in srgb, var(--theme-text) 7%, transparent); }
.h5-links > a,
.h5-dd__toggle { color: var(--theme-text); text-shadow: none; }
html[data-theme="light"] .h5-nav { background: color-mix(in srgb, var(--theme-surface) 88%, transparent); border-color: var(--theme-border); box-shadow: 0 10px 30px -20px var(--theme-shadow); backdrop-filter: blur(18px) saturate(130%); }
html[data-theme="light"] .h5-links a[aria-current="page"],
html[data-theme="light"] .h5-dd.is-current .h5-dd__toggle,
html[data-theme="light"] .h5-links > a:hover,
html[data-theme="light"] .h5-dd__toggle:hover { color: var(--theme-accent-deep); }

/* Shared sections, cards, forms and controls */
html[data-theme="light"] .section--light,
html[data-theme="light"] .section--ink2,
html[data-theme="light"] .f2 { background: var(--theme-bg); color: var(--theme-text); }
html[data-theme="light"] .section--light .lede,
html[data-theme="light"] .section--light .small-caps,
html[data-theme="light"] .f-lead { color: var(--theme-text-soft); }
html[data-theme="light"] .card,
html[data-theme="light"] .project-card,
html[data-theme="light"] .insight-card,
html[data-theme="light"] .contact-card { border-color: var(--theme-border); }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { background: var(--theme-input); color: var(--theme-text); border-color: var(--theme-border-strong); }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--theme-muted); }

/* Contact page: the two enquiry panels read as a deliberate pair. */
.contact-panel--info::before {
  background:
    radial-gradient(140% 110% at 0% 0%, color-mix(in srgb, var(--theme-accent) 16%, transparent), transparent 68%),
    linear-gradient(168deg, color-mix(in srgb, var(--theme-bg-soft) 70%, var(--theme-bg)), color-mix(in srgb, var(--theme-surface) 82%, var(--theme-surface-raised)));
  border-color: color-mix(in srgb, var(--theme-accent) 40%, var(--theme-border));
}
html[data-theme="dark"] .contact-panel--info .contact-line dt { color: color-mix(in srgb, var(--theme-muted) 75%, var(--theme-text)); }
.contact-panel--form::before {
  background:
    radial-gradient(105% 72% at 100% 0%, color-mix(in srgb, var(--theme-accent) 30%, transparent), transparent 62%),
    linear-gradient(195deg, var(--theme-surface-raised), color-mix(in srgb, var(--theme-surface) 76%, var(--theme-accent-deep)));
  border-color: color-mix(in srgb, var(--theme-accent) 50%, var(--theme-border));
  box-shadow: 0 34px 80px -50px var(--theme-shadow);
}
.contact-panel--form .field label { color: var(--theme-text-soft); }
.contact-panel--form .field input::placeholder,
.contact-panel--form .field textarea::placeholder { color: color-mix(in srgb, var(--theme-text-soft) 72%, var(--theme-muted)); }
.contact-panel--form .form__note { color: color-mix(in srgb, var(--theme-muted) 55%, var(--theme-text)); }
html[data-theme="light"] .contact-panel--info .eyebrow { color: var(--theme-accent-deep); }
html[data-theme="light"] .contact-panel--info .contact-line dt { color: var(--theme-text-soft); }
html[data-theme="light"] .contact-panel--info .text-link { color: var(--theme-accent-deep); }
html[data-theme="light"] .contact-panel--info::before {
  background:
    radial-gradient(115% 85% at 0% 0%, color-mix(in srgb, var(--theme-accent) 16%, transparent), transparent 62%),
    linear-gradient(168deg, color-mix(in srgb, var(--theme-bg-soft) 82%, var(--theme-accent-deep)), color-mix(in srgb, var(--theme-bg-soft) 88%, var(--theme-accent)));
  border-color: color-mix(in srgb, var(--theme-accent) 40%, var(--theme-border));
}
html[data-theme="light"] .contact-panel--form::before {
  background:
    radial-gradient(105% 72% at 100% 0%, color-mix(in srgb, var(--theme-accent) 11%, transparent), transparent 58%),
    linear-gradient(195deg, var(--theme-surface-raised), var(--theme-surface));
  border-color: color-mix(in srgb, var(--theme-accent) 30%, var(--theme-border));
  box-shadow: 0 26px 62px -42px color-mix(in srgb, var(--theme-accent-deep) 55%, transparent);
}

/* Homepage: retain the cinematic image fold, adapt the content fold. */
html[data-theme="light"] body.h5 { background: var(--theme-bg); color: var(--theme-text); }
.f1,
.hero,
.page-hero,
.journey-hero {
  color: #f4f0e9;
}
.f1 .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.journey-hero .eyebrow { color: #d29a63; }
.f1 .f1-sub,
.hero .hero__sub,
.page-hero .lede,
.journey-hero .lede,
.journey-hero .breadcrumb,
.journey-hero .breadcrumb a,
.journey-scroll { color: #cfc8bc; }
.journey-hero h1 { color: #f4f0e9; }
.journey-hero h1 em { color: #d29a63; }
.journey-hero__statement { color: #f2eee7; }
html[data-theme="light"] .f1-card,
html[data-theme="light"] .f1-stats { color: var(--theme-text); }
html[data-theme="light"] .f1-card .eyebrow { color: var(--theme-accent-deep); }
html[data-theme="light"] .f1-card .f1-sub,
html[data-theme="light"] .f1-stats dt { color: var(--theme-text-soft); }
html[data-theme="light"] .f1-card .grad { color: var(--theme-accent-deep); background: none; }
html[data-theme="light"] .f1-card .h5-btn--ghost { color: var(--theme-text); border-color: var(--theme-border-strong); background: var(--theme-input); }
html[data-theme="light"] .f2 .tile { border-color: var(--theme-border); box-shadow: 0 20px 45px -38px var(--theme-shadow); }
html[data-theme="light"] .f2 .tile--num,
html[data-theme="light"] .f2 .tile--list { background: radial-gradient(120% 120% at 0 0, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 60%), var(--theme-surface); color: var(--theme-text); }
html[data-theme="light"] .f2 .tile--num .tile__body > p,
html[data-theme="light"] .f2 .tile--list .tile__body > p,
html[data-theme="light"] .f2 .tile--list ul { color: var(--theme-text-soft); }

/* Existing light editorial areas become theme-aware. */
html[data-theme="light"] .ab { --ab-paper: var(--theme-bg); --ab-ink: var(--theme-text); --ab-soft: var(--theme-text-soft); --ab-rule: var(--theme-border); }
html[data-theme="light"] .ab-rooted,
html[data-theme="light"] .ab-promise { background: var(--theme-bg-soft); color: var(--theme-text); }
html[data-theme="light"] .ab-values { background: var(--theme-border); border-color: var(--theme-border); }
html[data-theme="light"] .ab-values li { background: var(--theme-surface); color: var(--theme-text); }
html[data-theme="light"] .ab-values li:hover { background: var(--theme-surface-raised); }

html[data-theme="light"] .ld { --p: var(--theme-bg); --p2: var(--theme-bg-soft); --i: var(--theme-text); --s: var(--theme-text-soft); --r: var(--theme-border); }
html[data-theme="light"] .ld-ph { background: repeating-linear-gradient(90deg, transparent 0 47px, color-mix(in srgb, var(--theme-text) 5%, transparent) 47px 48px), linear-gradient(160deg, var(--theme-bg-soft), var(--theme-surface)); }

/* The Leadership hero is a dark band in both themes, like the other page heroes,
   so its ink cannot be a theme token that flips to dark text over a dark ground. */
.ld-hero { background: linear-gradient(180deg, #0b0b0a, #1c1a17); color: #f4f0e9; }
.ld-hero::after { background: rgba(244, 240, 233, .14); }
.ld-hero .breadcrumb,
.ld-hero .breadcrumb a { color: #cfc8bc; }
.ld-hero .ld-kicker { color: #d29a63; }
.ld-h1 { color: #f4f0e9; }

html[data-theme="dark"] .journey,
html[data-theme="dark"] .journey-stats { --paper: var(--theme-bg-soft); --ink: var(--theme-text); --soft-ink: var(--theme-text-soft); --line-ink: var(--theme-border); background: var(--theme-bg-soft); color: var(--theme-text); }
html[data-theme="dark"] .journey-stats::before,
html[data-theme="dark"] .journey-stat span,
html[data-theme="dark"] .journey-stats__note { color: var(--theme-muted); }
html[data-theme="dark"] .journey-stat { border-color: var(--theme-border); }
html[data-theme="dark"] .journey-placeholder { color: var(--theme-muted); background: linear-gradient(145deg, var(--theme-surface-raised), var(--theme-surface)); }
html[data-theme="light"] .journey { --paper: var(--theme-bg); --ink: var(--theme-text); --soft-ink: var(--theme-text-soft); --line-ink: var(--theme-border); --accent: var(--theme-accent-deep); background: var(--theme-bg); color: var(--theme-text); }
html[data-theme="light"] .journey-stats { background: var(--theme-bg-soft); color: var(--theme-text); }

html[data-theme="dark"] .lg { background: var(--theme-bg); color: var(--theme-text); }
html[data-theme="dark"] .lg-sec h2,
html[data-theme="dark"] .lg-sub { color: var(--theme-text); }
html[data-theme="dark"] .lg-sec p,
html[data-theme="dark"] .lg-sec li,
html[data-theme="dark"] .lg-toc a { color: var(--theme-text-soft); }
html[data-theme="dark"] .lg-sec,
html[data-theme="dark"] .lg-hero,
html[data-theme="dark"] .lg-toc ol { border-color: var(--theme-border); }
html[data-theme="light"] .lg { background: var(--theme-bg); color: var(--theme-text); }
html[data-theme="light"] .lg-hero { background: var(--theme-bg-soft); }
html[data-theme="light"] .lg-hero h1,
html[data-theme="light"] .lg-sub { color: var(--theme-text); }
html[data-theme="light"] .lg-date,
html[data-theme="light"] .lg-hero .breadcrumb,
html[data-theme="light"] .lg-hero .breadcrumb a { color: var(--theme-muted); }

/* Footer, enquiry and overlays */
html[data-theme="light"] .h5-foot .foot-grid nav a { color: var(--theme-text-soft); }
html[data-theme="light"] .h5-foot .foot-grid > div > a { color: var(--theme-text); }
html[data-theme="light"] .h5-foot .foot-grid .muted { color: var(--theme-muted); }
.enq { background: var(--theme-overlay); color: var(--theme-text); }
.enq__box { background: radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--theme-accent) 14%, transparent), transparent 60%), var(--theme-surface); border-color: var(--theme-border); }
.enq__x { background: var(--theme-input); border-color: var(--theme-border-strong); color: var(--theme-text); }
.enq label,
.enq__done p { color: var(--theme-muted); }
.enq input,
.enq textarea { background: var(--theme-input); border-color: var(--theme-border); color: var(--theme-text); }
.enq__err,
.enq__msg.is-error { color: var(--theme-danger); }
.touch-tab { background: linear-gradient(180deg, color-mix(in srgb, var(--theme-surface) 95%, transparent), color-mix(in srgb, var(--theme-surface) 86%, transparent)); color: var(--theme-accent-soft); border-color: color-mix(in srgb, var(--theme-accent) 55%, transparent); box-shadow: 0 14px 34px -14px var(--theme-shadow); }
html[data-theme="light"] .touch-tab { color: var(--theme-accent-deep); }

/* Image overlays remain dark so captions stay readable in either theme. */
.gbox,
.lightbox { color-scheme: dark; }
.gal__item figcaption,
.lightbox__cap { color: #f3eee6; }

@media (max-width: 1024px) {
  .theme-toggle { order: 2; margin-left: auto; }
  .h5-burger { order: 3; margin-left: .55rem; }
  .h5-nav .h5-links { order: 4; }
  html[data-theme="light"] .h5-nav .h5-links { background: color-mix(in srgb, var(--theme-surface) 98%, transparent); border-color: var(--theme-border); }
}
@media (max-width: 640px) {
  .theme-toggle { width: 40px; height: 40px; flex-basis: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  body,
  .section,
  .f2,
  .h5-foot,
  .h5-nav,
  .card,
  input,
  select,
  textarea,
  button,
  a,
  .theme-toggle svg { transition: none !important; }
}