/* Shared color contract. Layout and motion live in the component stylesheets;
   every reading surface below follows the same persisted light/dark preference. */
:root {
    color-scheme: light;
    --surface-scene: #f1f3fc;
    --surface-panel: #ffffff;
    --surface-inset: #e9eef9;
    --surface-hover: #e0e7f6;
    --surface-line: #cdd6e8;
    --surface-ink: #23324c;
    --surface-muted: #4d5d79;
    --surface-accent: #6541a5;
    --surface-soft: #ede8fa;
    --surface-shadow: #1e31591a;
    --surface-highlight: #ffffffb3;
    --surface-contact: #edf6f3;
    --surface-paper: #fbf6ef;
    --surface-paper-tint: #e8def2;
    --surface-paper-ink: #48334e;
    --surface-paper-muted: #69516d;
    --surface-book: #beabc9;
    --surface-talk: #e7effc;
    --surface-talk-tint: #e9def9;
    --surface-orb: #e2d9f7;
    --surface-orb-light: #f5efff;
    --surface-mail: #c5e1d8;
    --surface-mail-edge: #548477;
    --surface-success: #236344;
    --surface-success-bg: #dcf0e4;
    --surface-danger: #b4233c;
    --action-start: #7134d4;
    --action-end: #215bb4;
    --action-ink: #ffffff;
    --hero-scene: #f6f3ff;
    --hero-halo: #e0d8f5;
    --hero-middle: #eeeafa;
    --classic-scene: linear-gradient(135deg, #f4f5ff, #ede3fb 35%, #fbeaf3 65%, #dfedff);
}
html.dark-mode {
    color-scheme: dark;
    --surface-scene: #131729;
    --surface-panel: #232c43;
    --surface-inset: #182338;
    --surface-hover: #323d58;
    --surface-line: #43506b;
    --surface-ink: #f0f3ff;
    --surface-muted: #c0c9df;
    --surface-accent: #c6b2fa;
    --surface-soft: #332c50;
    --surface-shadow: #03091859;
    --surface-highlight: #d9deff26;
    --surface-contact: #152323;
    --surface-paper: #272333;
    --surface-paper-tint: #393048;
    --surface-paper-ink: #f0e5f5;
    --surface-paper-muted: #cbbbd3;
    --surface-book: #5e4b69;
    --surface-talk: #212b48;
    --surface-talk-tint: #42365b;
    --surface-orb: #29243e;
    --surface-orb-light: #6462aa;
    --surface-mail: #2d4e45;
    --surface-mail-edge: #acd2c5;
    --surface-success: #9ce3bc;
    --surface-success-bg: #1d3b32;
    --surface-danger: #fda4af;
    --action-start: #bda6ff;
    --action-end: #88bcff;
    --action-ink: #17243d;
    --hero-scene: #101021;
    --hero-halo: #39275c;
    --hero-middle: #18142b;
    --classic-scene: linear-gradient(135deg, #0f172a, #4c1d95 35%, #831843 65%, #1e3a8a);
}
html:not(.dark-mode) { --secondary-color: #2563c4; --text-muted: #64748b; }

/* Shared actions need their own foreground: pale dark-theme accents need dark ink. */
html .btn-primary, html #contactSubmit, html .guide-controls [data-guide-next] {
    background: linear-gradient(125deg, var(--action-start), var(--action-end));
    color: var(--action-ink);
}
html .btn-primary:hover { color: var(--action-ink); }
html .btn-secondary:hover { color: var(--bg-primary); background: var(--primary-color); }
html .input-field::placeholder, html .ai-input::placeholder { color: var(--text-tertiary); opacity: 1; }

/* One footer for both CV versions, without fixed slate utility colors. */
html .site-footer { color: var(--text-primary); background: var(--bg-elevated); border-color: var(--border-primary); }
.site-footer p, .site-footer nav a { color: var(--text-secondary); }
.site-footer .footer-social { color: var(--primary-color); background: var(--bg-tertiary); border: 1px solid var(--border-primary); box-shadow: 0 4px 10px var(--shadow-sm); }
.site-footer .footer-social:hover { color: var(--action-ink); background: var(--action-start); border-color: transparent; }
.site-footer .footer-social:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 4px; }
.site-footer .footer-copyright { color: var(--text-tertiary); border-color: var(--border-primary); }

/* Both introductions belong to the selected theme, including their secondary copy. */
html .journey-intro { background: var(--hero-scene); color: var(--text-primary); }
html .journey-stage { background: radial-gradient(ellipse at 78% 80%, var(--hero-halo), var(--hero-middle) 40%, var(--hero-scene) 75%); }
html .journey-intro :is(.hero-name, .hero-greeting, .hero-role, .hero-rotate-words) { color: var(--text-primary); }
html .journey-intro :is(.hero-subtitle, .hero-description, .journey-skip, .journey-scroll-cue) { color: var(--text-secondary); }
html .journey-intro .hero-name-gradient { color: var(--primary-color); }
html .journey-open { background: linear-gradient(125deg, var(--action-start), var(--action-end)); color: var(--action-ink); }
html .journey-open:focus-visible, html .journey-skip:focus-visible { outline-color: var(--primary-color); }
html .journey-intro .experience-switch, html[data-experience="classic"] .classic-version-control .experience-switch { background: var(--bg-card); border-color: var(--border-secondary); color: var(--text-primary); }
html .journey-progress { background: var(--border-secondary); }
html .journey-progress > span { background: var(--primary-color); }
html[data-experience="classic"] .classic-section { background: var(--hero-scene); }
html[data-experience="classic"] .classic-bg { background-image: var(--classic-scene); }
html[data-experience="classic"] .classic-section .classic-name-primary { color: var(--text-primary); }
html[data-experience="classic"] :is(.classic-greeting, .classic-rotate-words, .classic-bracket) { color: var(--primary-color); }
html[data-experience="classic"] .classic-section :is(.text-slate-300, .text-slate-400) { color: var(--text-secondary) !important; }
html[data-experience="classic"] .classic-section .btn-secondary { color: var(--primary-color); border-color: var(--primary-color); }
html[data-experience="classic"] .classic-section a[aria-label] { color: var(--primary-color); }
html:not(.dark-mode) .classic-orb { opacity: .14; }
html:not(.dark-mode) .classic-grid { opacity: .2; }

/* Chapter colors: the composition and accent identity stay consistent in both themes. */
html .chapter-scene { --studio-muted: var(--surface-muted); background: var(--surface-scene); color: var(--surface-ink); box-shadow: 0 22px 48px var(--surface-shadow), inset 0 1px 0 var(--surface-highlight); }
html .chapter-contact { background: var(--surface-contact); }
html .chapter-scene .chapter-atmosphere { background: radial-gradient(ellipse at 18% 90%, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 62%); }
html .chapter-skills .chapter-atmosphere { background: radial-gradient(ellipse at 24% 90%, color-mix(in srgb, var(--studio-accent) 16%, transparent), transparent 60%); }
html .chapter-atmosphere i { border-color: color-mix(in srgb, var(--surface-accent) 12%, transparent); }
html .chapter-workspace h3, html .chapter-skills .chapter-detail-title { color: var(--surface-ink); }
html .chapter-choices button { color: var(--surface-muted); border-color: var(--surface-line); background: var(--bg-card); }
html .chapter-choices button > .bi { color: var(--surface-accent); }
html .chapter-choices button[aria-pressed="true"] { background: linear-gradient(115deg, var(--studio-accent), var(--studio-companion)); color: #10213b; border-color: transparent; }
html .chapter-choices button[aria-pressed="true"] > .bi { color: #10213b; }
html .chapter-scene button:focus-visible { outline-color: var(--primary-color); }
html .chapter-experience .chapter-choices { border-color: var(--surface-line); }
html .workbench-tool { background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--studio-accent) 15%, transparent), transparent 75%), linear-gradient(150deg, var(--surface-panel), var(--surface-inset)); box-shadow: inset 0 1px 0 var(--surface-highlight), inset 0 -1px 0 var(--surface-line), 0 12px 24px var(--surface-shadow); }
html .workbench-tool > span { color: var(--surface-ink); }
html .chapter-skill-list li { color: var(--surface-muted); border-color: var(--surface-line); background: color-mix(in srgb, var(--surface-panel) 60%, transparent); }
html .chapter-skill-list li::before { background: var(--surface-accent); }
html .orbit-core { background: radial-gradient(circle at 35% 25%, var(--surface-orb-light), var(--surface-orb) 80%); box-shadow: inset 0 2px 0 var(--surface-highlight), 0 20px 35px var(--surface-shadow); }
html .orbit-core > span { color: var(--surface-ink); }
html .orbit-core > i, html .orbit-input > i, html .orbit-output > i { color: var(--surface-accent); }
html .orbit-input, html .orbit-output, html .studio-orbit p { color: var(--surface-muted); }
html .studio-orbit .orbit-geometry { color: var(--surface-accent); }
html .chapter-experience .career-window { background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--primary-color) 9%, transparent), transparent 60%), var(--surface-panel); box-shadow: inset 0 1px 0 var(--surface-highlight), 0 16px 30px var(--surface-shadow); }
html .career-window > strong { color: var(--surface-ink); }
html .career-window .career-date, html .career-window > p { color: var(--surface-accent); }
html .career-location, html .career-responsibilities li { color: var(--surface-muted); }
html .career-responsibilities { border-color: var(--surface-line); }
html .career-responsibilities li::before { background: var(--primary-color); }
html .studio-notebook { background: linear-gradient(120deg, var(--surface-book), var(--surface-paper-tint)); }
html .notebook-page { color: var(--surface-paper-ink); background: radial-gradient(ellipse at 100% 0, var(--surface-paper-tint), transparent 65%), var(--surface-paper); box-shadow: 0 4px 0 -1px var(--surface-book), 0 8px 0 -3px var(--surface-paper-tint); }
html .notebook-page strong, html .notebook-certifications li { color: var(--surface-paper-ink); }
html .notebook-page p, html .notebook-page :is(.notebook-date, .notebook-place) { color: var(--surface-paper-muted); }
html .notebook-emblem { color: var(--surface-paper-ink); background: linear-gradient(140deg, var(--surface-paper), var(--surface-paper-tint)); box-shadow: inset 0 1px 0 var(--surface-highlight), 0 7px 15px var(--surface-shadow); }
html .notebook-certifications li { border-color: var(--surface-line); }
html .notebook-certifications li > i, html .notebook-signature { color: var(--surface-paper-muted); }
html .studio-conversation { color: var(--surface-ink); background: radial-gradient(ellipse at 100% 0, var(--surface-talk-tint), transparent 70%), var(--surface-talk); box-shadow: inset 0 1px 0 var(--surface-highlight), 0 18px 32px var(--surface-shadow); }
html .conversation-greeting, html .conversation-proficiency, html .conversation-details dd { color: var(--surface-ink); }
html .studio-conversation > p, html .conversation-level, html .conversation-details dt { color: var(--surface-muted); }
html .conversation-emblem { color: color-mix(in srgb, var(--surface-accent) 14%, transparent); }
html .conversation-wave i, html .conversation-progress span { background: linear-gradient(var(--primary-color), var(--secondary-color)); }
html .conversation-progress { background: var(--surface-line); }
html .conversation-details > div { border-color: var(--surface-line); }
html .chapter-contact .draft-letter { background: linear-gradient(150deg, var(--surface-paper), var(--surface-paper-tint)); }
html .draft-envelope svg { stroke: var(--surface-mail-edge); fill: var(--surface-mail); }
html .draft-letter i { background: var(--surface-paper-muted); }
html .chapter-contact .draft-checks > span { border-color: var(--surface-line); color: var(--surface-muted); background: var(--surface-panel); }
html .chapter-contact .draft-checks > span[data-filled="true"] { color: var(--surface-success); background: var(--surface-success-bg); }
html .studio-draft > p, html .chapter-result-caption { color: var(--surface-muted); }
html .chapter-scene .chapter-compose { color: var(--action-ink); background: linear-gradient(120deg, var(--action-start), var(--action-end)); }

/* Project library and every simulated application honor the surrounding theme. */
html .project-cinema { color: var(--surface-ink); background: var(--surface-scene); }
html .project-stage { background: radial-gradient(ellipse at 64% 58%, var(--surface-talk-tint), var(--surface-scene) 82%); }
html .scene-floor { background: linear-gradient(var(--surface-inset), var(--surface-scene)); border-color: var(--surface-line); }
html .project-toolbar, html .scene-caption, html .project-device-bar { background: var(--surface-inset); color: var(--surface-ink); }
html .scene-demo-label, html .project-cinema .scene-status { color: var(--surface-muted); }
html .scene-back { color: var(--surface-ink); }
html .scene-controls button { color: var(--surface-ink); border-color: var(--surface-line); background: var(--surface-panel); }
html .scene-controls button:hover { background: var(--surface-hover); }
html .project-cinema .project-launcher { background: radial-gradient(ellipse at 0 0, var(--surface-talk-tint), transparent 80%), var(--surface-scene); }
html .project-cinema .launcher-instruction { color: var(--surface-muted); }
html .project-launcher-grid button { color: var(--surface-ink); background: var(--surface-panel); box-shadow: 0 7px 15px var(--surface-shadow); }
html .project-launcher-grid button:hover { background: var(--surface-hover); }
html .project-launcher-grid button > span:not(.launcher-arrow) { color: var(--surface-ink); }
html .launcher-arrow { color: var(--surface-accent); background: var(--surface-soft); }
html .project-laptop-screen, html .project-phone, html .demo-screen { color: var(--surface-ink); background: var(--surface-scene); }
html .demo-screen :is(h4, strong) { color: var(--surface-ink); }
html .demo-screen :is(p, small), html .demo-app-header, html .demo-role, html .rag-sources, html .automation-pipeline i, html .phone-stock, html .phone-steps, html .phone-sync { color: var(--surface-muted); }
html .demo-app-header, html .demo-inventory, html .bi-chart, html .pipeline-track { border-color: var(--surface-line); }
html .demo-action { background: var(--action-start); color: var(--action-ink); }
html .demo-action:hover { background: var(--action-end); }
html .erp-flow span, html .demo-period, html .rag-question { background: var(--surface-soft); color: var(--surface-accent); }
html .erp-flow i, html .automation-log span { color: var(--surface-muted); }
html .inventory-meter { background: var(--surface-line); }
html .inventory-meter i, html .bi-chart span, html .pipeline-track i { background: var(--primary-color); }
html .demo-inventory strong, html .bi-headline strong, html .automation-pipeline span { color: var(--surface-accent); }
html .portal-document, html .rag-answer, html .automation-log, html .phone-delivery { background: var(--surface-panel); color: var(--surface-ink); }
html .portal-door { color: var(--surface-accent); }
html .phone-delivery > span { color: var(--surface-muted); }
html .demo-order > span, html .phone-delivery small, html .portal-workspace p, html .automation-log .demo-after { color: var(--surface-success); }
html .stock-notification { background: var(--surface-success-bg); color: var(--surface-success); }
html .stock-notification strong { color: inherit; }
html .rag-sources span { border-color: var(--surface-accent); }

/* The quiet CV gets the same materials without enabling motion or hiding detail. */
html[data-experience="classic"] .portfolio-screen :is(.card-hover, .experience-card, .language-card) {
    border-radius: 14px; border-color: var(--border-primary);
    background-image: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--primary-color) 9%, transparent), transparent 68%);
    box-shadow: 0 10px 25px var(--shadow-sm), inset 0 1px 0 var(--surface-highlight);
}
html[data-experience="classic"] #skills .skill-badge { border-radius: 9px; }
html[data-experience="classic"] .portfolio-screen .card-hover:hover, html[data-experience="classic"] .language-card:hover { transform: none; }
html .ai-widget .ai-error { color: var(--surface-danger); }
html .ai-widget .ai-launcher { background: linear-gradient(135deg, var(--action-start), var(--action-end)); color: var(--action-ink); }
html .ai-widget .ai-panel { background: var(--bg-card); }
html .ai-widget .ai-message-author { opacity: 1; }
html .ai-widget .ai-message-note { color: var(--text-secondary); opacity: 1; }
html .ai-widget .ai-contact-action:hover { color: var(--action-ink); }
@media print { html .site-footer { background: white; color: black; } }

html .phone-app-header { color: var(--surface-ink); }
html .phone-app-header i { background: var(--surface-success); }
html #contactSubmit.is-sent { background: var(--surface-success-bg) !important; color: var(--surface-success); }
html:not(.dark-mode) .classic-name-gradient { background-image: linear-gradient(90deg, #7131be, #9b2b87, #375fbc); }