/* Light / Dark theme.
 * Light is the original design and is left untouched. Dark re-maps the same design tokens
 * (warm near-black surfaces, warm off-white text, the brand pink deepened to a rose) so both
 * themes share one identity. Loaded in <head> so the stored theme paints without a flash. */

html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

/* ---------- design tokens ---------- */
html[data-theme="dark"]{
  --am-bg:#151412;          /* page */
  --am-surface:#1d1b19;     /* cards, pills, inputs */
  --am-surface-2:#262320;   /* raised / hover */
  --am-deep:#0e0d0c;        /* footer, dark feature panels */
  --am-text:#F3F1EC;
  --am-text-2:#C9C6BF;
  --am-text-3:#9d968b;
  --am-line:rgba(243, 241, 236,.22);
  --am-line-soft:rgba(243, 241, 236,.12);
  --am-pink:#3F5F82;        /* brand pink, deepened */
  --am-pink-hover:#48698F;
  --am-pink-soft:#212A36;
}

/* Framer pages (Home, About, Works, Contact, 404) */
html[data-theme="dark"] body{
  --color-bg-primary:var(--am-bg);
  --color-bg-warm:var(--am-surface);
  --color-text-primary:var(--am-text);
  --color-border-subtle:var(--am-line);
  --color-border-muted:var(--am-line-soft);
  --color-accent-yellow:var(--am-pink);
}

/* Static pages (case studies, Impressum, Datenschutz) */
html[data-theme="dark"]{
  --bg:var(--am-bg);--bg-warm:#1a1816;--card:var(--am-surface);
  --ink:var(--am-text);--ink-2:var(--am-text-2);--muted:var(--am-text-3);
  --line:var(--am-line);--line-soft:var(--am-line-soft);
  --pink:var(--am-pink);--pink-soft:var(--am-pink-soft);
}

/* ---------- theme switch (sits next to the EN | DE switch) ---------- */
.am-theme{appearance:none;-webkit-appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin:0 12px 0 0;padding:0;border:1px solid var(--color-text-primary,#201f1d);border-radius:999px;background:var(--color-bg-warm,#fff);color:var(--color-text-primary,#201f1d);cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.am-theme:hover{background:var(--color-accent-yellow,#BCE8D2)}
.am-theme:focus-visible{outline:2px solid var(--color-text-primary,#201f1d);outline-offset:2px}
.am-theme svg{position:absolute;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
/* light shows the moon (switches to dark); dark shows the sun */
.am-theme .am-ico-sun{opacity:0;transform:rotate(-70deg) scale(.6)}
.am-theme .am-ico-moon{opacity:1;transform:none}
html[data-theme="dark"] .am-theme .am-ico-sun{opacity:1;transform:none}
html[data-theme="dark"] .am-theme .am-ico-moon{opacity:0;transform:rotate(70deg) scale(.6)}
.am-lang:has(+.am-theme){margin-right:8px}
@media (max-width:809.98px){.am-theme{width:36px;height:36px;margin-right:8px}.am-theme svg{width:16px;height:16px}.am-lang:has(+.am-theme){margin-right:6px}}
/* static pages: the nav already has its own gap */
header.nav .nav-r .am-theme{margin:0}
header.nav .nav-r .am-lang:has(+.am-theme){margin-right:0}
html[data-theme="dark"] header.nav{--color-text-primary:var(--am-text);--color-bg-warm:var(--am-surface);--color-accent-yellow:var(--am-pink)}

/* ---------- a short, calm cross-fade while the theme changes (colours only, no layout) ---------- */
html.am-theme-anim,html.am-theme-anim *,html.am-theme-anim *::before,html.am-theme-anim *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease,box-shadow .35s ease,opacity .35s ease!important}
@media (prefers-reduced-motion:reduce){html.am-theme-anim,html.am-theme-anim *,html.am-theme-anim *::before,html.am-theme-anim *::after{transition:none!important}}

/* ---------- scrollbars + selection ---------- */
html[data-theme="dark"]{scrollbar-color:#4b4640 var(--am-bg)}
html[data-theme="dark"] ::selection{background:var(--am-pink);color:var(--am-text)}

/* the canvas behind everything must follow the theme too (overscroll, pre-paint) */
html[data-theme="dark"]{background-color:var(--am-bg)}

/* tablet header: three controls (EN|DE, theme, Résumé) need a little more room next to the links */
@media (min-width:810px) and (max-width:1099.98px){
  [data-name="Button-Container"]:has(>.am-lang){padding-left:12px!important}
  nav .am-lang button{min-width:34px;padding:0 8px}
  nav .am-theme{margin-right:8px}
  nav [data-name="Button-Container"] a{padding-left:12px!important;padding-right:12px!important}
  nav [data-name="Links"]{gap:18px!important}
}
/* narrowest tablets (810–1000px) in German: tighten a little more so the logo is never squeezed */
@media (min-width:810px) and (max-width:1000px){
  html[lang="de"] [data-name="Button-Container"]:has(>.am-lang){padding-left:6px!important}
  html[lang="de"] nav .am-lang button{min-width:28px;padding:0 4px}
  html[lang="de"] nav .am-lang:has(+.am-theme){margin-right:6px}
  html[lang="de"] nav .am-theme{margin-right:6px}
  html[lang="de"] nav [data-name="Button-Container"] a{padding-left:8px!important;padding-right:8px!important}
  html[lang="de"] nav [data-name="Links"]{gap:10px!important}
}
@media (min-width:810px) and (max-width:1000px){
  html[lang="de"] nav [data-name="Logo+Clock"]>*{zoom:1.02!important}
}
@media (min-width:810px) and (max-width:829.98px){
  html[lang="de"] nav [data-name="Logo+Clock"]>*{zoom:.88!important}
}

/* =====================================================================================
   Framer pages — places where the original design hard-codes or inverts a colour
   ===================================================================================== */
/* the pages force a white canvas with !important */
html[data-theme="dark"],html[data-theme="dark"] body{background-color:var(--am-bg)!important}
html[data-theme="dark"] body{--color-bg-primary:var(--am-bg)!important}

/* Footer + call-to-action band sit on the deep "inverted" surface in both themes:
   the footer uses the text colour as its background, so it keeps its own mapping */
html[data-theme="dark"] footer.ui-ZQbXF,
html[data-theme="dark"] [data-name="CTA-Section"]{
  --color-text-primary:var(--am-deep);
  --color-bg-warm:var(--am-text);
  --color-accent-yellow:#BCE8D2;
  --color-border-subtle:rgba(243, 241, 236,.22);
  --color-border-muted:rgba(243, 241, 236,.12);
}
html[data-theme="dark"] footer.ui-ZQbXF{background-color:var(--am-deep)}

/* testimonial accordion (.kw) — its own local tokens + tinted panels */
html[data-theme="dark"] .kw{--ink:var(--am-text);--line:var(--am-line);--muted:var(--am-text-3);--hl:var(--am-pink)}
html[data-theme="dark"] .kw-item{background:var(--am-surface)}
html[data-theme="dark"] .kw-item[style*="188, 232, 210"]{--kw-tint:#3F5F82!important;--kw-soft:#2c2122!important}
html[data-theme="dark"] .kw-item[style*="214,205,233"]{--kw-tint:#52497a!important;--kw-soft:#25222f!important}
html[data-theme="dark"] .kw-item[style*="208,218,201"]{--kw-tint:#4f5d49!important;--kw-soft:#222721!important}
html[data-theme="dark"] .kw-panel{background:radial-gradient(110% 85% at 0% 100%,var(--kw-soft) 0%,rgba(29,27,25,0) 60%)}
html[data-theme="dark"] .kw-ava{background-color:#3a3631}
html[data-theme="dark"] .kw.is-auto .kw-item.is-open::before{background:linear-gradient(rgba(243, 241, 236,.35),rgba(243, 241, 236,.35)) 0 0/0% 100% no-repeat,var(--kw-tint)}

/* hover numbers on the Home work cards */
html[data-theme="dark"] a.ui-LT2sA.ui-EtG6L .am-stats{color:var(--am-text)}
html[data-theme="dark"] .am-stats-l{color:var(--am-text-3)}
html[data-theme="dark"] .am-stat+.am-stat{border-left-color:var(--am-line)}
html[data-theme="dark"] .am-stat span{color:var(--am-text-2)}

/* "About" long-form blocks (.aman-case / .ac-*) */
html[data-theme="dark"] .aman-case{--line:var(--am-line-soft);--muted:var(--am-text-3)}

/* follow-the-cursor tag */
html[data-theme="dark"] .aman-cursor{border-color:var(--am-text);color:var(--am-text)}

/* hand-drawn hero arrow + animated greeting */
html[data-theme="dark"] .ui-1d4lwg7 .ui-1lwfmwa::before{background:var(--am-text)}
html[data-theme="dark"] .ui-1d4lwg7 .ui-1lwfmwa p::before,html[data-theme="dark"] .ui-1d4lwg7 .ui-1lwfmwa p::after{color:var(--am-text)}

/* client logos are dark artwork on transparent: show them as light, uniform marks */
html[data-theme="dark"] img[alt="Traikare"],html[data-theme="dark"] img[alt="cognith"],html[data-theme="dark"] img[alt="Builder.ai"],
html[data-theme="dark"] img[alt="AgileDock"],html[data-theme="dark"] img[alt="FASH"],html[data-theme="dark"] img[alt="Metafic"]{filter:brightness(0) invert(.9)}

/* work cards (Home = a.ui-LT2sA.ui-EtG6L, Works = a.ui-DlCYs.ui-1arxjw3) */
html[data-theme="dark"] :is(a.ui-LT2sA.ui-EtG6L,a.ui-DlCYs.ui-1arxjw3){border-color:var(--am-line)!important}
html[data-theme="dark"] :is(a.ui-LT2sA.ui-EtG6L,a.ui-DlCYs.ui-1arxjw3)::before{background:var(--am-surface-2)}
html[data-theme="dark"] a.ui-LT2sA.ui-EtG6L .ui-9thl3z::before,html[data-theme="dark"] a.ui-DlCYs.ui-1arxjw3 .ui-e4ffro::before{color:var(--am-text)}
html[data-theme="dark"] a.ui-LT2sA.ui-EtG6L .ui-alh549 h3,html[data-theme="dark"] a.ui-DlCYs.ui-1arxjw3 .ui-69nu6r p{background-image:linear-gradient(transparent 62%,var(--am-pink) 62%,var(--am-pink) 92%,transparent 92%)}
html[data-theme="dark"] a.ui-LT2sA.ui-EtG6L .ui-1trzvg0,html[data-theme="dark"] a.ui-DlCYs.ui-1arxjw3 .ui-18blyay{border-color:var(--am-text)}
html[data-theme="dark"] a.ui-LT2sA.ui-EtG6L .ui-9thl3z::after,html[data-theme="dark"] a.ui-DlCYs.ui-1arxjw3 .ui-e4ffro::after{border-color:var(--am-text)}
html[data-theme="dark"] a.ui-LT2sA.ui-EtG6L:hover .ui-9thl3z::after,html[data-theme="dark"] a.ui-DlCYs.ui-1arxjw3:hover .ui-e4ffro::after{background-color:var(--am-pink)}
html[data-theme="dark"] a.ui-LT2sA.ui-EtG6L .ui-1ts3v8q,html[data-theme="dark"] a.ui-DlCYs.ui-1arxjw3 .ui-1tz3idc{border-color:var(--am-line)}
html[data-theme="dark"] :is(a.ui-LT2sA.ui-EtG6L,a.ui-DlCYs.ui-1arxjw3):focus-visible{outline-color:var(--am-text)}
html[data-theme="dark"] a.ui-DlCYs.ui-1arxjw3 .ui-iw488u p{color:var(--am-text-2)}
/* section dividers */
html[data-theme="dark"] .ui-1n1bz7h>.ui-x77wx2+*,html[data-theme="dark"] .ui-17udigv{border-top-color:var(--am-text)}

/* "by the numbers" block */
html[data-theme="dark"] .nb-list::before,html[data-theme="dark"] .nb-list::after{background:var(--am-text)}
html[data-theme="dark"] .nb-item+.nb-item::after{background:var(--am-line)}
html[data-theme="dark"] .nb-item:nth-child(n+3),html[data-theme="dark"] .nb-item+.nb-item{border-top-color:var(--am-line)}
html[data-theme="dark"] .nb-idx,html[data-theme="dark"] .nb-fig{color:var(--am-text)}
html[data-theme="dark"] .nb-cap{color:var(--am-text-2)}

/* contact form feedback */
html[data-theme="dark"] .am-form-msg{color:var(--am-text)}
html[data-theme="dark"] .am-form-msg.err{color:#ff9d94}

/* floating "Let's Connect" pill (dark text on the pink would be unreadable once the pink is deepened) */
html[data-theme="dark"] a[href^="mailto:"][style*="height: 40px"],html[data-theme="dark"] a[href^="mailto:"][style*="height: 40px"] *{color:var(--am-text)!important}

/* contact form: the placeholder token is a 20 % tint — give it readable contrast on dark */
html[data-theme="dark"] form ::placeholder{color:var(--am-text-3);opacity:1}
html[data-theme="dark"] form select:invalid,html[data-theme="dark"] form select.ui-form-input:invalid{color:var(--am-text-3)!important}
html[data-theme="dark"] form select:valid{color:var(--am-text)}
html[data-theme="dark"] form button[data-name="Incomplete"]{opacity:.72!important}

/* =====================================================================================
   Static pages (case studies, Impressum, Datenschutz)
   ===================================================================================== */
html[data-theme="dark"] .nav{background:rgba(21,20,18,.9)}
html[data-theme="dark"] .resume:hover{background:var(--am-pink-hover)}
/* dark feature panel + footer use the "deep" surface (they used the ink colour, which is now light) */
html[data-theme="dark"] .ch.results{background:var(--am-deep)}
html[data-theme="dark"] .foot{background:var(--am-deep);box-shadow:inset 0 1px 0 var(--am-line-soft)}
html[data-theme="dark"] .results .rnums b{color:#BCE8D2}
html[data-theme="dark"] .results .btn:hover{color:#201f1d}
/* buttons whose hover state fills with the ink colour */
html[data-theme="dark"] .btn:hover,html[data-theme="dark"] .btn.done{color:var(--bg)}
html[data-theme="dark"] .connect{color:var(--ink)}
html[data-theme="dark"] .connect:hover{background:var(--ink);color:var(--bg)}
html[data-theme="dark"] .ba .tag{background:var(--card)}
/* marker used for unfinished legal text stays a pale highlight */
html[data-theme="dark"] .legal-body .todo{color:#201f1d}

/* bright screenshots: soften the glare a little on dark (logos have their own rule above) */
html[data-theme="dark"] img{filter:brightness(.9)}
html[data-theme="dark"] .lb img{filter:none}

/* muted text that the case-study stylesheet hard-codes as a tint of the dark ink */
html[data-theme="dark"] :is(.crumbs,.num .i,.rail a,.label .n){color:var(--am-text-3)}
html[data-theme="dark"] .principles .i{color:rgba(243, 241, 236,.35)}
html[data-theme="dark"] .dec h3 s,html[data-theme="dark"] .dec h3 s::before{color:rgba(243, 241, 236,.45)}
html[data-theme="dark"] .stepfig .n{color:rgba(243, 241, 236,.28)}
html[data-theme="dark"] .rail a:hover,html[data-theme="dark"] .rail a.on{color:var(--am-text)}

/* hand-written label above the outcome quote sits on the deep panel: use the light brand pink */
html[data-theme="dark"] .rsplit blockquote::before{color:#BCE8D2}

/* "↗" badge on the live preview: white circle + dark arrow is the light design; on dark it becomes a glass circle with a light arrow */
html[data-theme="dark"] .aman-live-tag{background:rgba(21,20,18,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(243, 241, 236,.6);color:var(--am-text)}

/* ---- NAGINA wordmark (replaces the old "Aman" logo) ----
   Two SVGs: nagina-logo-dark.svg (dark ink, for light surfaces) and nagina-logo-light.svg (white, for dark surfaces).
   Framer pages: the nav logo ("Dark" variant) follows the theme, the footer logo ("Light" variant) always sits on the deep footer, so it is always white.
   The original SVG is hidden but kept in the DOM so React hydration is untouched. */
[data-name="Aman"]{width:88px!important;height:22.5px!important;background:url(/assets/logo/nagina-logo-dark.svg) left center/contain no-repeat}
[data-name="Aman"] svg{opacity:0}
a[data-name="Light"] [data-name="Aman"]{background-image:url(/assets/logo/nagina-logo-light.svg)}
html[data-theme="dark"] a[data-name="Dark"] [data-name="Aman"]{background-image:url(/assets/logo/nagina-logo-light.svg)}
/* static pages (case studies, Impressum, Datenschutz): text link replaced by the image, text kept for screen readers */
a.logo{display:inline-block;width:128px;height:33px;font-size:0!important;line-height:0;overflow:hidden;color:transparent;background:url(/assets/logo/nagina-logo-dark.svg) left center/contain no-repeat;vertical-align:middle}
html[data-theme="dark"] a.logo,.foot a.logo{background-image:url(/assets/logo/nagina-logo-light.svg)}
@media (max-width:700px){a.logo{width:110px;height:28px}}


/* ---- Dark-mode accessibility pass (audit of 2026-10-02) ---- */
/* 1+3: form placeholder and field borders are set through variables on the wrapper (the Framer rule is more specific than a plain ::placeholder rule) */
html[data-theme="dark"] .ui-form-input-wrapper{--ui-input-placeholder-color:var(--am-text-3)!important;--ui-input-border-color:rgba(243, 241, 236,.42)!important}
html[data-theme="dark"] form ::placeholder{color:var(--am-text-3)!important;opacity:1}
/* 2: Framer pill buttons (Read my story, View all projects, Résumé…): on hover the circle fills with soft white in dark mode, so the label flips to the dark surface colour */
html[data-theme="dark"] a.ui-KXJvL:hover :is(p,span,div){color:var(--am-bg)!important;--ui-text-color:var(--am-bg)!important}
/* 4: visible keyboard focus on the header logo, nav links and header controls (the Framer 'auto' ring is <1px after zoom and clipped) */
nav:has(.am-lang) :is(a[href],button):focus-visible,.nav :is(a[href],button):focus-visible{outline:2px solid var(--color-text-primary,#201f1d)!important;outline-offset:3px!important;border-radius:6px}
nav:has(.am-lang)>*,nav:has(.am-lang) [data-name="Logo+Clock"]{overflow:visible!important}
a.logo:focus-visible{outline:2px solid var(--ink,#201f1d);outline-offset:4px;border-radius:4px}
.foot a.logo:focus-visible{outline-color:#fefcfa}
/* 5: "Send message" gets a visible hover/focus (dark only) */
html[data-theme="dark"] form button[data-name="Incomplete"]:hover,html[data-theme="dark"] form button[type="submit"]:hover{opacity:1!important;background-color:var(--am-pink-hover)!important}
/* project-card arrow: the glyph is a dark SVG background, invisible on dark — use a light stroke (the pink hover fill keeps the cream arrow readable) */
html[data-theme="dark"] a.ui-LT2sA.ui-EtG6L .ui-9thl3z::after,html[data-theme="dark"] a.ui-DlCYs.ui-1arxjw3 .ui-e4ffro::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 13.5l9-9M6.5 4.5h7v7' fill='none' stroke='%23F3F1EC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}


/* header: logo image has line-height 0 → centre the brand row so the clock sits level with it */
header.nav .brand{align-items:center}
/* the Hamburg clock needs room: show it from 1200px so the header never overflows (also in German) */
@media (max-width:1199.98px){header.nav .clock{display:none}}