/* ================================================================
   SAJID MK — THREE COMPLETE METALLIC COLOR THEMES
   Theme 1 Platinum/Pearl (original); Theme 2 Titanium Matte/Amethyst;
   Theme 3 Desert Titanium text and coordinated warm metals.
   Styling ONLY. All interactions remain in script.js; markup in HTML.
   Loaded last, after platinum-titanium-copper.css.
   The 0–100px --site-glass-filter is never changed by theme switching.
   ================================================================ */
:root {
  --theme-metal-matte: 52,54,59;
  --theme-hairline: 201,206,211;
  --theme-special: #B78E83;
  --theme-matte-opacity: .05;
  --theme-caption: #C9CED3;
  --theme-shadow: rgba(0,0,0,.64);
}
/* Theme 2 — Silver gray matte / Titanium, Amethyst solely for details. */
html[data-site-theme="titanium-matte"] {
  --platinum:#C2C8CE;
  --pearl:#E8E9EB;
  --titanium:#A6B1BD;
  --copper:#B8A4C9;
  --secondary-accent:#B8A4C9;
  --crystal-gold:#A6B1BD;
  --crystal-light:#E8E9EB;
  --crystal-line:rgba(166,177,189,.50);
  --theme-special:#B8A4C9;
  --theme-caption:#C2C8CE;
  --theme-metal-matte:52,54,59;
  --theme-hairline:166,177,189;
  --theme-matte-opacity:.10;
  --vision-border:rgba(166,177,189,.45);
}
/* Theme 3 — Desert Titanium. Warm metallic text everywhere on the site;
   pale Desert Titanium for small body text maintains readability. */
html[data-site-theme="desert-titanium"] {
  --platinum:#CFB8A4;
  --pearl:#E3D3C3;
  --titanium:#B29D8A;
  --copper:#B29D8A;
  --secondary-accent:#B29D8A;
  --crystal-gold:#B29D8A;
  --crystal-light:#E3D3C3;
  --crystal-line:rgba(178,157,138,.52);
  --theme-special:#B29D8A;
  --theme-caption:#D1B9A5;
  --theme-metal-matte:49,42,37;
  --theme-hairline:178,157,138;
  --theme-matte-opacity:.095;
  --vision-border:rgba(178,157,138,.48);
}

/* 3 circular theme swatches in original display dock, same compact capsule. */
html body .fx-dots .text-colour-dot[data-site-theme] {
  background:linear-gradient(145deg,var(--theme-dot-top),var(--theme-dot-bottom));
  --dot-colour:var(--theme-dot-top);
  border-color:rgba(255,255,255,.66);
}
html body .fx-dots .text-colour-dot[data-site-theme="platinum"] {
  --theme-dot-top:#F5F3ED; --theme-dot-bottom:#A6B1BD; --d:0;
}
html body .fx-dots .text-colour-dot[data-site-theme="titanium-matte"] {
  --theme-dot-top:#A6B1BD; --theme-dot-bottom:#34363B; --d:1;
  border-color:#B8A4C9;
}
html body .fx-dots .text-colour-dot[data-site-theme="desert-titanium"] {
  --theme-dot-top:#D8C0A9; --theme-dot-bottom:#6E625B; --d:2;
}
html body .fx-dots .text-colour-dot[aria-pressed="true"] {
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 0 0 3px rgba(var(--theme-hairline),.4),
             0 0 14px 1px var(--theme-dot-top);
}
html[data-site-theme="titanium-matte"] body .fx-dots::after {
  border-color:#B8A4C9;
  box-shadow:0 0 13px rgba(184,164,201,.52);
}
html[data-site-theme="desert-titanium"] body .fx-dots::after {
  border-color:#D8C0A9;
  box-shadow:0 0 13px rgba(178,157,138,.52);
}
/* Keep all 3 choices comfortably above the bold switch, including on mobile. */
html body .fx-dots { gap:var(--fx-gap); }
@media(max-height:480px){ html body .fx-panel { max-height:calc(100dvh - 12px); overflow-y:auto; } }

/* Full-site material change: very translucent matte, no forced blur. */
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
:is(.section,.recruiter-bar,.footer-panel,.glass,.glass-clear,.glass-tight,
.vision-main-pane,.vision-identity,.vision-project-card,.vision-console-frame .term-window,
.real-world-feature,.client-case,.concept-card,.sajid-offer-card,.sajid-subscribe-card,
.edu-card,.degree-proof,.degree-proof-card,.cert-card,.tl-item,.tk-card,.bd-card,.case-card,
.sp-summary,.sp-incident,.geo-vault,.diag-console,.tk-panel,.vview-panel,.vgate-panel,.cmdk-panel,
.hero-client-teaser,.vision-online-row .status-chip,.vision-landing .hero-bismillah) {
  background-color:rgba(var(--theme-metal-matte),var(--theme-matte-opacity)) !important;
  border-color:rgba(var(--theme-hairline),.42) !important;
  border-top-color:rgba(var(--theme-hairline),.67) !important;
  box-shadow:0 22px 55px -35px var(--theme-shadow),inset 0 1px 0 rgba(255,255,255,.13) !important;
}
/* A coordinated transparent navigation rail, pills, and dropdown. */
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body #topNav {
  background:rgba(var(--theme-metal-matte),.18) !important;
  border-color:rgba(var(--theme-hairline),.48) !important;
  border-top-color:rgba(var(--theme-hairline),.70) !important;
}
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
#topNav :is(.nav-link,.nav-more>summary.nav-link),
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body .mob-drawer .nav-link {
  color:var(--pearl) !important;
  background:rgba(var(--theme-metal-matte),.11) !important;
  border-color:rgba(var(--theme-hairline),.56) !important;
}
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
#topNav :is(.nav-link.active,.nav-more[open]>summary.nav-link),
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
#topNav :is(.nav-link,.nav-more>summary.nav-link):is(:hover,:focus-visible) {
  background:rgba(var(--theme-hairline),.18) !important;
  border-color:var(--theme-special) !important;
}
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body #topNav .nav-more-menu {
  background:rgba(var(--theme-metal-matte),.20) !important;
  border-color:rgba(var(--theme-hairline),.55) !important;
}

/* Site-wide copy. The rich dark photo stays visible; headings, notes,
   labels, paragraphs and cards adapt together instead of dock-only change. */
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body {
  color:var(--pearl);
}
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,small,summary,legend,label,
.section-intro,.hero-sub,.vision-role-line,.vision-name,.vision-pane-eyebrow,.vision-kicker,
.vision-project-card .vision-project-title,.concept-kicker,.concept-type,.concept-title,
.degree-proof-overline,.status-item .val,.status-item .lbl,.tk-note,.edu-card p,
.case-col p,.sajid-service-features li,.sajid-subscribe-card p,.sajid-offer-card p,
.footer-panel p,.contact-panel p,.section-label) {
  color:var(--pearl) !important;
}
/* Secondary text stays visible and theme-aware, not washed-out gray/gold. */
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
:is(.section-label,.eyebrow,.recruiter-label,.vision-pane-eyebrow,.vision-kicker,
.vision-project-tags span,.vision-role-line,.concept-project-count,
.degree-proof-overline,.cert-meta,.footer-lexicon .label,.sajid-card-eyebrow) {
  color:var(--platinum) !important;
}
/* Special accents: amethyst in Theme 2 and desert metal in Theme 3. */
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
#client-projects :is(.concept-kicker,.concept-type,.concept-title-period,.real-world-live,.concept-card .concept-label),
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
#client-projects .concept-demo-cta span,
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
#contact :is(.sajid-discount-note strong,.sajid-service-features li::before),
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body .vision-landing .hero-client-teaser-dot {
  color:var(--theme-special) !important;
}
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body #client-projects
:is(.concept-card,.client-case,.real-world-feature) {
  border-color:rgba(var(--theme-hairline),.42) !important;
}
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body #client-projects
:is(.concept-card:hover,.client-case:hover,.real-world-feature:hover) {
  border-color:var(--theme-special) !important;
}
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
:is(.btn-primary,.btn.primary,.btn-primary.btn,.nav-cta,.cert-btn.primary,.cf-submit,.tk-primary),
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body #contact .sajid-primary-action,
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body #client-projects .client-showcase-cta {
  background:linear-gradient(120deg,var(--platinum),var(--titanium)) !important;
  color:#15171B !important;
  border-color:rgba(var(--theme-hairline),.62) !important;
  text-shadow:none !important;
}
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
:is(.btn-secondary,.btn.ghost,.cert-btn,.recruiter-link,.contact-pill,.sajid-secondary-action):hover,
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body #client-projects .concept-demo-cta:hover {
  color:var(--pearl) !important;
  border-color:var(--theme-special) !important;
}
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body .vision-landing .hero-bismillah {
  color:var(--pearl) !important;
  background:rgba(var(--theme-metal-matte),.08) !important;
  border-color:rgba(var(--theme-hairline),.66) !important;
}
/* Apply theme-specific metallic coloring to the distinct section-number
   ornaments while retaining the existing 3D animations and spacing. */
html[data-site-theme="titanium-matte"] body .section-ordinal .ordinal-glyph {
  -webkit-text-stroke-color:color-mix(in srgb,var(--ordinal-color) 72%,#B8A4C9) !important;
  color:color-mix(in srgb,var(--ordinal-color) 65%,#B8A4C9) !important;
}
html[data-site-theme="desert-titanium"] body .section-ordinal .ordinal-glyph {
  -webkit-text-stroke-color:color-mix(in srgb,var(--ordinal-color) 45%,#B29D8A) !important;
  color:color-mix(in srgb,var(--ordinal-color) 45%,#D1B9A5) !important;
}
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body .section .section-label .dot {
  background:var(--theme-special) !important;
  box-shadow:0 0 10px color-mix(in srgb,var(--theme-special) 35%,transparent) !important;
}
/* Theme 3 specifically extends Desert Titanium text into button labels,
   cards, inputs and the dock; selected filled light CTA keeps dark ink. */
html[data-site-theme="desert-titanium"] body
:is(.status-chip,.vision-project-tags span,.cert-btn:not(.primary),.recruiter-link,
.contact-pill,.nav-brand,.vision-featured,.sajid-signoff,.tk-card .tk-label,
.form-field,.form-field input,.form-field textarea,.cf-field input,.cf-field textarea,
.cf-field select) {
  color:#E3D3C3 !important;
}
html[data-site-theme="desert-titanium"] body input::placeholder,
html[data-site-theme="desert-titanium"] body textarea::placeholder {
  color:#C2AB97 !important;
}
/* Accessibility: retain black text on genuinely pale button fills. */
html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
:is(.btn-primary,.nav-cta,.cert-btn.primary,.cf-submit,.tk-primary,.client-showcase-cta) :is(span,b,strong,small) {
  color:#15171B !important;
}
@media print {
  /* Printed CV stays black on white independently of the website theme. */
  html:is([data-site-theme="titanium-matte"],[data-site-theme="desert-titanium"]) body
  :is(h1,h2,h3,h4,p,li,small,label) { color:#111 !important; }
}