/* ─────────────────────────────────────────
   HARMONY — theme tokens (dark = brand base, light, auto = follows the OS)
   One place switches the whole site. <html data-theme="dark|light"> is resolved by the inline script in
   includes/header.php (preference stored in localStorage 'harmony_theme': auto | light | dark; default dark).
   Every stylesheet reads the aliases below; never hard-code surface/text colours in component CSS.
   `.theme-dark` forces the dark palette inside a section (used for the photo hero).
   ───────────────────────────────────────── */

/* 1 — semantic tokens (dark values) */
:root, .theme-dark {
  color-scheme: dark;
  --t-bg: #0A0A0A;          /* page */
  --t-surface: #111111;     /* cards */
  --t-surface-2: #161616;   /* nested surface */
  --t-border: #1E1E1E;
  --t-border-h: #2E2E2E;    /* hovered / stronger border */
  --t-ink: #FFFFFF;         /* strongest text */
  --t-text: #f0f2ee;        /* body text on page */
  --t-body: rgba(255,255,255,.72);
  --t-muted: #888888;       /* secondary text */
  --t-muted-a: rgba(240,242,238,.65);
  --t-gray: #888888;
  --t-faint: #444444;       /* decorative icons / dots */
  --t-faint-2: #333333;     /* ghost-button borders */
  --t-faint-3: #555555;
  --t-chip: #1A1A1A;        /* chips, counters, placeholder tiles */
  --t-chip-2: #262626;      /* skeleton lines */
  --t-field: #0F0F0F;       /* inputs */
  --t-thumb: #151515;       /* image placeholder behind covers */
  --t-hover: rgba(255,255,255,.06);
  --t-hairline: rgba(255,255,255,.14);
  --t-glass: rgba(10,10,10,.86);      /* sticky header */
  --t-glass-2: rgba(10,10,10,.92);    /* sticky sub-nav */
  --t-pop: #111111;         /* tooltips / popovers */
  --t-pop-a: rgba(17,17,17,.9);
  --t-green: #24C76A;       /* fills (always) */
  --t-green-text: #24C76A;  /* green used as text/icon colour (darker on light) */
  --t-green-t: rgba(36,199,106,.10);
  --t-green-b: rgba(36,199,106,.28);
  --t-purple: #7A4FE0;
  --t-purple-text: #9b79f0;
  --t-purple-t: rgba(122,79,224,.12);
  --t-glow: rgba(36,199,106,.20);
  --t-shadow: rgba(0,0,0,.5);
}

/* 2 — light palette (brand light mode: white / #F5F5F5 / #E5E5E5 / #0A0A0A / #555) */
html[data-theme="light"] {
  color-scheme: light;
  --t-bg: #FFFFFF;
  --t-surface: #F5F5F5;
  --t-surface-2: #EFEFEF;
  --t-border: #E5E5E5;
  --t-border-h: #D2D2D2;
  --t-ink: #0A0A0A;
  --t-text: #0A0A0A;
  --t-body: rgba(10,10,10,.78);
  --t-muted: #5C5C5C;
  --t-muted-a: rgba(10,10,10,.68);
  --t-gray: #6B6B6B;
  --t-faint: #B4B4B4;
  --t-faint-2: #CFCFCF;
  --t-faint-3: #A3A3A3;
  --t-chip: #E9E9E9;
  --t-chip-2: #E2E2E2;
  --t-field: #FFFFFF;
  --t-thumb: #EDEDED;
  --t-hover: rgba(10,10,10,.05);
  --t-hairline: rgba(10,10,10,.14);
  --t-glass: rgba(255,255,255,.94);
  --t-glass-2: rgba(255,255,255,.94);
  --t-pop: #FFFFFF;
  --t-pop-a: rgba(255,255,255,.92);
  --t-green-text: #12853F;
  --t-green-t: rgba(36,199,106,.14);
  --t-green-b: rgba(18,133,63,.34);
  --t-purple-text: #6A3FD6;
  --t-purple-t: rgba(122,79,224,.10);
  --t-glow: rgba(36,199,106,.16);
  --t-shadow: rgba(10,10,10,.14);
}

/* 3 — aliases used by the component stylesheets (declared on every scope that re-declares tokens) */
:root, .sd, .cta-band, .sd-works, .sd-work, .theme-dark {
  /* style.css family */
  --bg: var(--t-bg); --bg2: var(--t-surface); --bg3: var(--t-chip);
  --white: var(--t-text); --muted: var(--t-muted-a); --gray: var(--t-gray); --line: var(--t-border);
  --green: var(--t-green); --green2: #2be07a; --gdim: var(--t-green-t); --gglow: var(--t-glow);
  --gborder: var(--t-green-b); --purple: var(--t-purple); --plite: var(--t-purple-text); --pdim: var(--t-purple-t);
  /* layout.css family (header, footer, 404) */
  --l-bg: var(--t-bg); --l-surface: var(--t-surface); --l-border: var(--t-border); --l-border-h: var(--t-border-h);
  --l-muted: var(--t-muted); --l-link: var(--t-body); --l-green: var(--t-green); --l-green-t: var(--t-green-t);
  --l-green-b: var(--t-green-b); --l-green-text: var(--t-green-text); --l-ink: var(--t-ink);
  /* service / home / services / portfolio family */
  --sd-bg: var(--t-bg); --sd-surface: var(--t-surface); --sd-surface-2: var(--t-surface-2);
  --sd-border: var(--t-border); --sd-border-h: var(--t-border-h); --sd-text: var(--t-ink); --sd-muted: var(--t-muted);
  --sd-body: var(--t-body); --sd-green: var(--t-green); --sd-green-text: var(--t-green-text);
  --sd-green-t: var(--t-green-t); --sd-green-b: var(--t-green-b);
  --sd-purple: var(--t-purple); --sd-purple-t: var(--t-purple-t);
  /* CTA band */
  --cb-bg: var(--t-bg); --cb-surface: var(--t-surface); --cb-border: var(--t-border); --cb-border-h: var(--t-border-h);
  --cb-text: var(--t-ink); --cb-muted: var(--t-muted); --cb-green: var(--t-green); --cb-green-text: var(--t-green-text);
  --cb-green-t: var(--t-green-t); --cb-green-b: var(--t-green-b);
}
.theme-dark { background: var(--t-bg); color: var(--t-text); }

html { transition: background-color .25s ease; }
/* smooth colour change when the visitor flips the theme (class is set for ~300ms by the toggle) */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .28s ease, border-color .28s ease, color .28s ease, fill .28s ease, stroke .28s ease !important;
}
@media (prefers-reduced-motion: reduce) { html.theme-anim, html.theme-anim * { transition: none !important; } }

/* 4 — assets drawn for dark backgrounds (white brand logos) turn black on the light theme */
html[data-theme="light"] .hh-trust-logos img,
html[data-theme="light"] .sd-logo img,
html[data-theme="light"] .cli-card img { filter: brightness(0); }
html[data-theme="light"] .cli-card .cli-card-img { filter: brightness(0) invert(.45); }
html[data-theme="light"] .cli-card:hover .cli-card-img { filter: brightness(0); }
html[data-theme="light"] .work-client-logo img { filter: brightness(0); }

/* Yektanet wordmark: white version on dark, dark version on light (the hero stays dark) */
.yk-l { display: none !important; }
html[data-theme="light"] .yk-d { display: none !important; }
html[data-theme="light"] .yk-l { display: inline-block !important; }
html[data-theme="light"] .theme-dark .yk-d { display: inline-block !important; }
html[data-theme="light"] .theme-dark .yk-l { display: none !important; }