/* Optional palette layer: load AFTER note-theme.css when skins are integrated.
   Source references and licensing notes: ../../../docs/SKIN-DESIGN.md.
   Original TOKANS CSS, informed by the supplied palette facts; no brand assets.
   Every rule is opt-in. Standard light/dark and calendar geometry stay intact. */

:root[data-skin=asana] {
 color-scheme:light;
 --ink:#0d0d0d; --muted:#646f79; --paper:#fff; --white:#fff;
 --line:#f3f3f3; --border-strong:#858e96;
 --surface-subtle:#f3f3f3; --surface-hover:#e9ebed;
 --action:#646f79; --action-hover:#505b65; --action-text:#fff;
 --green:#505b65; --lime:#c5cbd0; --tiffany:#0d0e10; --tiffany-ink:#fff;
 --accent-soft:#f3f3f3; --accent-text:#0d0e10; --accent-line:#646f79;
 --focus:#0d0e10; --notification:#b22323;
 --danger:#b22323; --danger-soft:#fdf3f3;
 --caution:#865b19; --caution-soft:#fff5e5;
 --info:#315e83; --info-soft:#edf3fa; --info-line:#7b9bbd;
 --event-text:#853d68; --event-bg:#f8eff5; --event-line:#b2769a;
 --skin-success:#276d52; --skin-success-bg:#edf6f0;
 --skin-todo:#915018; --skin-todo-bg:#fff2e5;
 --radius:20px; --skin-control-radius:8px; --skin-input-radius:8px;
 --skin-card-radius:20px; --skin-small-radius:4px; --skin-tag-radius:9999px;
 --shadow:0 2px 8px rgba(0,0,0,.15); --skin-card-shadow:none;
 --skin-backdrop:rgba(13,14,16,.48);
 --skin-banner:#0d0e10; --skin-banner-text:#fff; --skin-banner-muted:#c5cbd0;
}

:root[data-skin=notion] {
 color-scheme:dark;
 --ink:#f2f2f2; --muted:#b0b0af; --paper:#191918; --white:#2f2f2f;
 --line:rgba(255,255,255,.13); --border-strong:#808080;
 --surface-subtle:#252524; --surface-hover:#3b3b3a;
 --action:#fff; --action-hover:#e5e5e5; --action-text:#191918;
 --green:#83b9ef; --lime:#83b9ef; --tiffany:#2383e2; --tiffany-ink:#fff;
 --accent-soft:#243c52; --accent-text:#a3cef8; --accent-line:#2383e2;
 --focus:#83b9ef; --notification:#a92d2d;
 --danger:#ffaaaa; --danger-soft:#472c2c;
 --caution:#f2c94c; --caution-soft:#3c3525;
 --info:#a3cef8; --info-soft:#243c52; --info-line:#2383e2;
 --event-text:#e2b4d6; --event-bg:#402e3c; --event-line:#ba86ad;
 --skin-success:#6fcf97; --skin-success-bg:#243e30;
 --skin-todo:#f2c94c; --skin-todo-bg:#3c3525;
 --radius:12px; --skin-control-radius:8px; --skin-input-radius:6px;
 --skin-card-radius:12px; --skin-small-radius:4px; --skin-tag-radius:4px;
 --shadow:0 8px 24px rgba(0,0,0,.35); --skin-card-shadow:0 1px 3px rgba(0,0,0,.2);
 --skin-backdrop:rgba(0,0,0,.65);
 --skin-banner:#252524; --skin-banner-text:#f2f2f2; --skin-banner-muted:#b0b0af;
}

:root[data-skin=kose] {
 color-scheme:light;
 --ink:#3b4043; --muted:#62686b; --paper:#fff; --white:#fff;
 --line:#c8c8c8; --border-strong:#85898b;
 --surface-subtle:#f7f7f7; --surface-hover:#f3f3f3;
 /* Coral stays the main CTA. Dark lettering preserves small-label contrast. */
 --action:#ee696f; --action-hover:#ef8186; --action-text:#25282a;
 --green:#a82d40; --lime:#ee696f; --tiffany:#ee696f; --tiffany-ink:#25282a;
 --accent-soft:#fff0f1; --accent-text:#a82d40; --accent-line:#ee696f;
 --focus:#a82d40; --notification:#a82d40;
 --danger:#a72d30; --danger-soft:#fff0f0;
 --caution:#805a16; --caution-soft:#fff8d8;
 --info:#23667c; --info-soft:#ecf7fa; --info-line:#56bbdc;
 --event-text:#883f75; --event-bg:#f9eff7; --event-line:#be88ad;
 --skin-success:#276d52; --skin-success-bg:#edf6f0;
 --skin-todo:#915018; --skin-todo-bg:#fff2e5;
 --radius:0px; --skin-control-radius:0px; --skin-input-radius:0px;
 --skin-card-radius:0px; --skin-small-radius:0px; --skin-tag-radius:18px;
 --shadow:0 4px 24px rgba(59,64,67,.12); --skin-card-shadow:none;
 --skin-backdrop:rgba(59,64,67,.45);
 --skin-banner:#3b4043; --skin-banner-text:#fff; --skin-banner-muted:#dedfe0;
}

:root[data-skin=urban-research] {
 color-scheme:light;
 /* Slightly deepen source #747474 so small labels also work on #f4f4f4. */
 --ink:#333; --muted:#6e6e6e; --paper:#fff; --white:#fff;
 --line:#dcdcdc; --border-strong:#858585;
 --surface-subtle:#f4f4f4; --surface-hover:#ebebeb;
 --action:#333; --action-hover:#4c4c4c; --action-text:#fff;
 --green:#5e181a; --lime:#bca878; --tiffany:#5e181a; --tiffany-ink:#fff;
 --accent-soft:#f7eeee; --accent-text:#5e181a; --accent-line:#5e181a;
 --focus:#333; --notification:#5e181a;
 --danger:#a13b39; --danger-soft:#f2dede;
 --caution:#795b23; --caution-soft:#f6f1e4;
 /* Source cyan is retained as an accent; link text uses a readable shade. */
 --info:#176b87; --info-soft:#edf6f9; --info-line:#37a5cc;
 --event-text:#773e65; --event-bg:#f6eef3; --event-line:#a57694;
 --skin-success:#27634c; --skin-success-bg:#edf4ef;
 --skin-todo:#89501d; --skin-todo-bg:#fbf0e6;
 --radius:0px; --skin-control-radius:0px; --skin-input-radius:0px;
 --skin-card-radius:0px; --skin-small-radius:0px; --skin-tag-radius:0px;
 --shadow:none; --skin-card-shadow:none; --skin-backdrop:rgba(0,0,0,.5);
 --skin-banner:#333; --skin-banner-text:#fff; --skin-banner-muted:#dcdcdc;
}


:root[data-skin=shiseido] {
 color-scheme:light;
 --ink:#45433e; --muted:#68655e; --paper:#fff; --white:#fff;
 --line:#d3d2cf; --border-strong:#45433e;
 --surface-subtle:#f3f2f0; --surface-hover:#e7e6e3;
 --action:#45433e; --action-hover:#5b5851; --action-text:#fff;
 --green:#45433e; --lime:#d3d2cf; --tiffany:#c80421; --tiffany-ink:#fff;
 --accent-soft:#f3f2f0; --accent-text:#45433e; --accent-line:#c80421;
 --focus:#45433e; --notification:#c80421;
 --danger:#c80421; --danger-soft:#fff1f3;
 --caution:#805a16; --caution-soft:#fff8e5;
 --info:#315e83; --info-soft:#edf3fa; --info-line:#7b9bbd;
 --event-text:#773e65; --event-bg:#f6eef3; --event-line:#a57694;
 --skin-success:#27634c; --skin-success-bg:#edf4ef;
 --skin-todo:#89501d; --skin-todo-bg:#fbf0e6;
 --radius:0px; --skin-control-radius:0px; --skin-input-radius:0px;
 --skin-card-radius:0px; --skin-small-radius:0px; --skin-tag-radius:0px;
 --shadow:none; --skin-card-shadow:none; --skin-backdrop:rgba(61,61,61,.5);
 --skin-banner:#3d3d3d; --skin-banner-text:#fff; --skin-banner-muted:#d3d2cf;
}

/* White outlined controls and warm gray secondary surfaces keep red confined
   to small markers/alerts. Inset strokes do not change existing button sizes. */
:root[data-skin=shiseido] .btn:not(.secondary):not(.danger) {
 background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);
}
:root[data-skin=shiseido] .btn:not(.secondary):not(.danger):hover {
 background:var(--surface-hover);
}
:root[data-skin=shiseido] .btn.secondary {
 background:#d3d2cf; color:var(--ink); border-color:var(--line);
}
:root[data-skin=shiseido] .btn.secondary:hover {
 background:var(--surface-hover); border-color:var(--border-strong);
}
:root[data-skin=shiseido] .text-link {color:var(--ink)}
:root[data-skin=shiseido] .text-link:hover {color:var(--danger)}

:root[data-skin=and-wander] {
 color-scheme:dark;
 --ink:#fff; --muted:#b0b0b0; --paper:#161616; --white:#222;
 --line:#444; --border-strong:#888; --surface-subtle:#222; --surface-hover:#333;
 --action:#eee; --action-hover:#fff; --action-text:#161616;
 --green:#eee; --lime:#eee; --tiffany:#eee; --tiffany-ink:#161616;
 --accent-soft:#333; --accent-text:#fff; --accent-line:#eee; --focus:#fff;
 --notification:#a92d2d; --danger:#ffaaaa; --danger-soft:#472c2c;
 --caution:#f2c94c; --caution-soft:#3c3525;
 --info:#a3cef8; --info-soft:#243c52; --info-line:#2383e2;
 --event-text:#e2b4d6; --event-bg:#402e3c; --event-line:#ba86ad;
 --skin-success:#6fcf97; --skin-success-bg:#243e30;
 --skin-todo:#f2c94c; --skin-todo-bg:#3c3525;
 --radius:0px; --skin-control-radius:0px; --skin-input-radius:0px;
 --skin-card-radius:0px; --skin-small-radius:0px; --skin-tag-radius:0px;
 --shadow:none; --skin-card-shadow:none; --skin-backdrop:rgba(0,0,0,.7);
 --skin-banner:#161616; --skin-banner-text:#fff; --skin-banner-muted:#b0b0b0;
}
:root[data-skin=and-wander] .btn:not(.secondary):not(.danger) {
 background:transparent; color:var(--ink); text-decoration:underline; text-underline-offset:4px;
}
:root[data-skin=and-wander] .btn:not(.secondary):not(.danger):hover {background:var(--surface-hover)}
:root[data-skin=and-wander] .text-link {color:var(--ink)}

:root[data-skin=lush] {
 color-scheme:dark;
 --ink:#fff; --muted:#aaa; --paper:#000; --white:#212121;
 /* Lift the source border slightly so it also separates hover surfaces. */
 --line:#383838; --border-strong:#858585; --surface-subtle:#212121; --surface-hover:#333;
 --action:#fff; --action-hover:#eee; --action-text:#000;
 --green:#fff; --lime:#fff; --tiffany:#fff; --tiffany-ink:#000;
 --accent-soft:#333; --accent-text:#fff; --accent-line:#fff; --focus:#7b7afa;
 --notification:#a92d2d; --danger:#ffaaaa; --danger-soft:#472c2c;
 --caution:#f2c94c; --caution-soft:#3c3525;
 --info:#a3cef8; --info-soft:#243c52; --info-line:#2383e2;
 --event-text:#e2b4d6; --event-bg:#402e3c; --event-line:#ba86ad;
 --skin-success:#6fcf97; --skin-success-bg:#243e30;
 --skin-todo:#f2c94c; --skin-todo-bg:#3c3525;
 --radius:0px; --skin-control-radius:40px; --skin-input-radius:8px;
 --skin-card-radius:0px; --skin-small-radius:0px; --skin-tag-radius:40px;
 --shadow:none; --skin-card-shadow:none; --skin-backdrop:rgba(0,0,0,.7);
 --skin-banner:#000; --skin-banner-text:#fff; --skin-banner-muted:#aaa;
}
:root[data-skin=lush] .text-link {color:var(--ink)}
/* Keep font metrics, spacing, breakpoints and pointer targets from the standard
   UI. These overrides also win when data-theme still records standard dark. */
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) {
 color:var(--ink); background:var(--paper);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.btn,.icon-button,.nav button,.project-nav button,.notification-tabs button,.search-mode button,.planner-kind,.planner-kind button,.planner-view-switch,.planner-view-switch button,.topbar-search,.calendar-month-option,.file-selection-toolbar) {
 border-radius:var(--skin-control-radius);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
 border-radius:var(--skin-input-radius); border-color:var(--border-strong);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(input,select,textarea):focus {
 border-color:var(--focus);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.panel,.post-card,.planner-panel,.search-workbench,.stat,.ai-answer,dialog) {
 border-radius:var(--skin-card-radius);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.panel,.post-card,.search-workbench,.planner-panel,.kanban-card) {
 box-shadow:var(--skin-card-shadow);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.folder-tile,.attachment-card,.attachment-pending,.upload-zone,.attachment-composer,.note,.readonly,.link-box,.kanban-column,.kanban-card,.agenda-item) {
 border-radius:var(--skin-control-radius);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) .kanban-column>header {
 border-radius:var(--skin-control-radius) var(--skin-control-radius) 0 0;
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.badge,.planner-project) {
 border-radius:var(--skin-tag-radius);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.brand-mark,.result-type b) {
 border-radius:var(--skin-small-radius);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) dialog {
 box-shadow:var(--shadow);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) dialog::backdrop {
 background:var(--skin-backdrop);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.welcome,.auth-aside) {
 background:var(--skin-banner); color:var(--skin-banner-text);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.welcome p,.welcome-date span,.auth-aside p,.auth-aside .brand small,.auth-aside footer) {
 color:var(--skin-banner-muted);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) .auth-art i {
 border-color:var(--accent-line);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) .auth-art i:nth-child(2) {
 background:var(--accent-soft);
}
/* Task status is semantic, independent of monochrome/coral/wine branding.
   The explicit overdue rule preserves the existing red priority. */
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.calendar-entry.task,.kanban-column).status-todo {
 --task-color:var(--skin-todo); --task-bg:var(--skin-todo-bg);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.calendar-entry.task,.kanban-column).status-done {
 --task-color:var(--skin-success); --task-bg:var(--skin-success-bg);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) :is(.calendar-entry.task,.kanban-card).is-overdue {
 --task-color:var(--danger); --task-bg:var(--danger-soft);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) .calendar-legend .status-todo {
 color:var(--skin-todo);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) .calendar-legend .status-done {
 color:var(--skin-success);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) .calendar-legend .is-overdue {
 color:var(--danger);
}
:root:is([data-skin=asana],[data-skin=notion],[data-skin=kose],[data-skin=urban-research],[data-skin=shiseido],[data-skin=and-wander],[data-skin=lush]) .live-status[data-connected=true] {
 background:var(--skin-success);
}
/* Preserve native checkbox/radio semantics and original Fileicon/PDF colors.
   No filters, transforms, blanket image rules or new motion are introduced. */

/* Keep LUSH content square after the shared control-shape rules. */
:root[data-skin=lush] :is(.folder-tile,.attachment-card,.attachment-pending,.upload-zone,.attachment-composer,.note,.readonly,.link-box,.kanban-column,.kanban-card,.agenda-item),:root[data-skin=lush] .kanban-column>header{border-radius:0}