/* Studio Yellow — the approved palette. Dark and light mode use the same identity. */

:root[data-palette="studio-yellow"], :root[data-palette="studio-yellow"][data-theme="dark"] {
  --bg: #111113;
  --surface: #1A1A1D;
  --surface-2: #242427;
  --ink: #F7F7F2;
  --muted: #B2B2B8;
  --line: #36363E;
  --accent: #F4C542;
  --accent-ink: #171717;
  --accent-text: #F4C542;
  --accent-hover: #FFD664;
  --paper: #F0F0EB;
  --paper-ink: #222227;
  --paper-muted: #5B5B61;
  --paper-line: #D3D3D7;
  --paper-focus: #795B00;
  --paper-border-hover: #7C7C84;
  --contact-bg: #1A1A1D;
  --contact-ink: #F7F7F2;
  --contact-muted: #BBBBBF;
  --contact-button-bg: #F4C542;
  --contact-button-ink: #171717;
  --contact-button-hover: #FFD664;
  --contact-border: #96969C;
  --glass: #1A1A1DF5;
  --studio: #1A1A1D;
  --studio-2: #242427;
  --studio-line: #36363E;
  --studio-text: #F7F7F2;
  --studio-muted: #B2B2B8;
  --demo-accent: #795B00;
  --demo-soft: #FFF3CB;
  --theme-demo-soft: #FFF3CB;
  --shadow: 0 24px 70px #00000030;
}

:root[data-palette="studio-yellow"][data-theme="light"] {
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F0F0EB;
  --ink: #1B1B20;
  --muted: #5A5B61;
  --line: #D4D4D7;
  --accent: #F4C542;
  --accent-ink: #171717;
  --accent-text: #755700;
  --accent-hover: #FFD664;
  --paper: #F0F0EB;
  --paper-ink: #222227;
  --paper-muted: #5B5B61;
  --paper-line: #D3D3D7;
  --paper-focus: #795B00;
  --paper-border-hover: #7C7C84;
  --contact-bg: #1A1A1D;
  --contact-ink: #F7F7F2;
  --contact-muted: #BBBBBF;
  --contact-button-bg: #F4C542;
  --contact-button-ink: #171717;
  --contact-button-hover: #FFD664;
  --contact-border: #96969C;
  --glass: #FFFFFFF5;
  --studio: #FFFFFF;
  --studio-2: #F0F0EB;
  --studio-line: #D4D4D7;
  --studio-text: #1B1B20;
  --studio-muted: #5A5B61;
  --demo-accent: #795B00;
  --demo-soft: #FFF3CB;
  --theme-demo-soft: #FFF3CB;
  --shadow: 0 24px 70px #00000012;
}


/* Studio Yellow finishing layer; approved V3 layout and state behaviour are retained. */
html[data-palette] {color-scheme:dark}
html[data-palette][data-theme=light] {color-scheme:light}
html[data-palette] .kinetic-text {background:none!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;position:relative;width:fit-content;padding-bottom:.08em}
html[data-palette] .kinetic-text::after {content:"";position:absolute;left:0;right:0;bottom:.02em;height:.045em;background:var(--accent);border-radius:1px;transform-origin:left;animation:theme-line-in .9s var(--ease) .4s both}
@keyframes theme-line-in {from{transform:scaleX(.15);opacity:0}to{transform:scaleX(1);opacity:1}}
html[data-palette] .button.primary {box-shadow:0 7px 25px color-mix(in srgb,var(--accent) 12%,transparent)}
html[data-palette] .button:hover {box-shadow:0 7px 25px #00000010}
html[data-palette] .hero-task[aria-pressed=true] .task-check,html[data-palette] .demo-run {color:var(--accent-ink)}
html[data-palette] .dial-value {stroke:var(--accent-text)}
html[data-palette][data-theme=light] .studio-window {box-shadow:0 18px 45px #00000012,0 0 0 5px #00000002}
html[data-palette][data-theme=light] .floating-tech {box-shadow:0 7px 20px #00000012}
html[data-palette] .flow-particle {background:linear-gradient(90deg,transparent,var(--accent))}
html[data-palette] .studio-dot,html[data-palette] .live-indicator:before {background:var(--accent)}
html[data-palette] .hero-task[aria-pressed=true] .task-check {border:1px solid color-mix(in srgb,var(--accent) 50%,var(--ink))}
html[data-palette] .lab-stage:not([data-accent=violet]):not([data-accent=slate]) {--demo-accent:var(--paper-focus);--demo-soft:var(--theme-demo-soft)}
html[data-palette] .swatch.blue {background:var(--accent)}
html[data-palette] .swatch.blue svg {color:var(--accent-ink)}
html[data-palette] .swatch.violet {background:#7451c8}
html[data-palette] .swatch.slate {background:#4d647f}
html[data-palette] .lab-stage[data-accent=violet] {--demo-accent:#7451c8;--demo-soft:#F0EBFB}
html[data-palette] .lab-stage[data-accent=slate] {--demo-accent:#4d647f;--demo-soft:#EDF1F5}
html[data-palette] .command-dialog {border-color:var(--line)}
html[data-palette] .contact-section .button {border-color:var(--contact-border)}
@media(prefers-reduced-motion:reduce){html[data-palette] .kinetic-text::after{animation:none}}


/* Manual pause also pauses the Studio Yellow underline entrance. */
html[data-motion="off"] .kinetic-text::after {animation: none !important;}