/* TipoloX website palette; local tokens also cross into our custom grid cells. */
:root {
    color-scheme: light;
    --background: #fbfcfa;
    --foreground: #17211e;
    --surface: #ffffff;
    --surface-elevated: #f4f8f4;
    --border: #dbe4dd;
    --control-border: #788b7f;
    --muted-foreground: #56645d;
    --brand: #176a3b;
    --brand-hover: #10552e;
    --brand-subtle: #e7f4e9;
    --brand-subtle-foreground: #125332;
    --on-brand: #ffffff;
    --code-background: #edf3ee;
    --focus-ring: #197a44;
    --panel-shadow-color: #16362208;
    --error-background: #fff1f1;
    --error-border: #ba5864;
    --status-active-text: #24643e;
    --status-active-background: #eaf6ee;
    --status-active-border: #c8e5d2;
    --status-pending-text: #855700;
    --status-pending-background: #fff4df;
    --status-pending-border: #ead7b5;
    --status-inactive-text: #596773;
    --status-inactive-background: #eff2f5;
    --status-inactive-border: #dbe1e6;
    --status-failed-text: #a5313b;
    --status-failed-background: #ffedef;
    --status-failed-border: #edc8ce;
    --progress-track: #dee8e0;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #091310;
    --foreground: #edf5ef;
    --surface: #101d17;
    --surface-elevated: #18271e;
    --border: #2c4234;
    --control-border: #698572;
    --muted-foreground: #a8b9ad;
    --brand: #79d876;
    --brand-hover: #9be595;
    --brand-subtle: #1c3b27;
    --brand-subtle-foreground: #b8ecae;
    --on-brand: #091310;
    --code-background: #0b1812;
    --focus-ring: #9be595;
    --panel-shadow-color: #00000033;
    --error-background: #491f28;
    --error-border: #bc6877;
    --status-active-text: #b8ecae;
    --status-active-background: #1c3b27;
    --status-active-border: #3b6443;
    --status-pending-text: #f4d589;
    --status-pending-background: #3e3117;
    --status-pending-border: #715724;
    --status-inactive-text: #c3cec7;
    --status-inactive-background: #25342c;
    --status-inactive-border: #425548;
    --status-failed-text: #ffc2c3;
    --status-failed-background: #491f28;
    --status-failed-border: #7a3543;
    --progress-track: #304b3a;
}
::selection { background: var(--brand-subtle); color: var(--brand-subtle-foreground); }
.external-nav { align-items: center; flex-wrap: wrap; }
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; min-width: 132px; padding: 8px 12px;
    border: 1px solid var(--control-border); border-radius: 6px;
    background: var(--surface); color: var(--foreground);
    font-size: 12px; font-weight: 650; white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--brand); background: var(--brand-subtle); }
.theme-toggle svg { flex-shrink: 0; }
/* Supported public CSS accent tokens, as used by the website's live grid. */
yc-grid {
    --litgrid-color-accent: var(--brand);
    --litgrid-color-accent-soft: var(--brand-subtle);
    --litgrid-color-accent-selected: var(--brand-subtle);
    --litgrid-color-accent-text: var(--brand-subtle-foreground);
}
@media (max-width: 600px) {
    .external-nav { gap: 12px 20px; }
}