/* ============================================================
   SLATE DESIGN SYSTEM — tokens, legacy remap, base, components.
   Source of truth: the "Node editor aesthetic improvement" Claude
   Design project (.dc.html mockups). Loaded LAST of the app CSS so
   its :root remap wins over style.css's legacy token block.

   Rules:
   - `--sl-*` and `.sl-*` are the only namespaces this file owns.
   - States are `.is-active` / `.is-selected` / `.is-danger`.
   - No `!important`. Never restyle `.sl-*` from other files —
     extend with a co-located modifier class instead.
   - Old style.css sections migrate per-surface: markup adopts
     `.sl-*`, that section's hexes become `var(--sl-*)`, and the
     section header gets tagged `[SLATE-MIGRATED]`.
   ============================================================ */

/* ---------- §1 Tokens ---------- */
:root {
    /* surfaces (darkest → lightest) */
    --sl-bg-tool:   oklch(0.15 0.003 250);   /* canvas stage, editor stage */
    --sl-bg-page:   oklch(0.165 0.004 250);  /* home/projects/assets page bg */
    --sl-bg-panel:  oklch(0.175 0.004 250);  /* editor side panels */
    --sl-bg-shelf:  oklch(0.185 0.005 250);  /* timeline dock, drawers */
    --sl-bg-rail:   oklch(0.19 0.005 250);   /* nav rail, topbars, search fields */
    --sl-bg-card:   oklch(0.2 0.006 250);    /* cards */
    --sl-bg-card-2: oklch(0.21 0.006 250);   /* hero card, nodes, switcher chip */
    --sl-bg-chip:   oklch(0.22 0.007 250);   /* inactive chips, secondary buttons, row hover */
    --sl-bg-pop:    oklch(0.24 0.007 250);   /* popovers/menus; card hover */
    --sl-bg-hover:  oklch(0.26 0.008 250);   /* chip/btn hover, active nav item */
    --sl-bg-active: oklch(0.3 0.01 250);     /* segmented selected, avatar disc */

    /* hairlines */
    --sl-line:      oklch(1 0 0 / 0.06);
    --sl-line-2:    oklch(1 0 0 / 0.07);     /* card borders */
    --sl-line-3:    oklch(1 0 0 / 0.09);     /* secondary button border */
    --sl-line-pop:  oklch(1 0 0 / 0.13);     /* popover border */
    --sl-inset:     inset 0 0 0 1px oklch(1 0 0 / 0.07);

    /* text ramp */
    --sl-text-hi:    oklch(0.97 0.002 250);
    --sl-text:       oklch(0.88 0.002 250);
    --sl-text-mid:   oklch(0.72 0.005 250);
    --sl-text-nav:   oklch(0.68 0.005 250);
    --sl-text-dim:   oklch(0.62 0.005 250);
    --sl-text-faint: oklch(0.55 0.005 250);
    --sl-text-ghost: oklch(0.5 0.005 250);

    /* accents */
    --sl-sky:      oklch(0.72 0.13 230);
    --sl-sky-hover: oklch(0.78 0.13 230);
    --sl-sky-text: oklch(0.8 0.11 230);
    --sl-sky-icon: oklch(0.75 0.12 230);
    --sl-on-sky:   oklch(0.15 0.02 240);     /* DARK text on sky buttons */
    --sl-green:    oklch(0.76 0.16 156);
    --sl-green-text: oklch(0.8 0.15 155);
    --sl-amber:    oklch(0.8 0.14 80);
    --sl-red:      oklch(0.65 0.19 25);
    --sl-red-text: oklch(0.78 0.1 25);

    /* alpha tints */
    --sl-sky-10: oklch(0.72 0.13 230 / 0.10);
    --sl-sky-12: oklch(0.72 0.13 230 / 0.12);
    --sl-sky-14: oklch(0.72 0.13 230 / 0.14);
    --sl-sky-16: oklch(0.72 0.13 230 / 0.16);
    --sl-sky-35: oklch(0.72 0.13 230 / 0.35);
    --sl-sky-50: oklch(0.72 0.13 230 / 0.5);
    --sl-green-14: oklch(0.66 0.14 155 / 0.14);
    --sl-green-45: oklch(0.66 0.14 155 / 0.45);
    --sl-amber-14: oklch(0.8 0.14 80 / 0.14);
    --sl-amber-40: oklch(0.8 0.14 80 / 0.4);
    --sl-red-12: oklch(0.65 0.19 25 / 0.12);
    --sl-ring-track: oklch(1 0 0 / 0.1);

    /* fonts */
    --sl-font-ui:      'Onest', system-ui, sans-serif;
    --sl-font-display: 'Space Grotesk', sans-serif;
    --sl-font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* radii ladder */
    --sl-r-xs: 6px;
    --sl-r-sm: 8px;
    --sl-r-md: 11px;
    --sl-r-lg: 14px;
    --sl-r-xl: 18px;

    /* shadows */
    --sl-shadow-pop:   0 18px 40px -10px oklch(0 0 0 / 0.9);
    --sl-shadow-modal: 0 30px 80px -20px oklch(0 0 0 / 0.9);
    --sl-shadow-card:  0 8px 20px -8px oklch(0 0 0 / 0.6);
    --sl-shadow-float: 0 14px 34px -14px oklch(0 0 0 / 0.75);

    /* canvas dot grid */
    --sl-dot-grid: radial-gradient(oklch(0.36 0.01 250 / 0.65) 1px, transparent 1px);
}

/* ---------- §2 Legacy remap (coexistence mechanism) ----------
   Reassign the old token names so every var()-driven rule in
   style.css / simplified-mode.css / injected CSS re-themes at once.
   Hardcoded hexes stay pinned until their section migrates. */
:root {
    --bg-primary: var(--sl-bg-page);
    --bg-secondary: var(--sl-bg-card-2);
    --bg-tertiary: var(--sl-bg-active);
    --accent: var(--sl-sky);
    --accent-hover: var(--sl-sky-hover);
    --text-primary: var(--sl-text-hi);
    --text-secondary: var(--sl-text-dim);
    --border-color: var(--sl-line-2);
    --success: var(--sl-green);
    --warning: var(--sl-amber);
    --danger: var(--sl-red);
}

/* ---------- §3 Base ---------- */
body {
    font-family: var(--sl-font-ui);
    background: var(--sl-bg-page);
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: oklch(0.32 0.008 250); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: oklch(0.32 0.008 250) transparent; }

.sl-h1 {
    font-family: var(--sl-font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sl-text-hi);
}

/* ---------- §4 Shared components ---------- */

/* buttons */
.sl-btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 17px; border: none; border-radius: var(--sl-r-md);
    background: var(--sl-sky); color: var(--sl-on-sky);
    font-family: var(--sl-font-ui); font-weight: 700; font-size: 13.5px;
    cursor: pointer;
}
.sl-btn-primary:hover { filter: brightness(1.07); }
.sl-btn-secondary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border: 1px solid var(--sl-line-3); border-radius: var(--sl-r-md);
    background: var(--sl-bg-chip); color: var(--sl-text);
    font-family: var(--sl-font-ui); font-weight: 600; font-size: 13px;
    cursor: pointer;
}
.sl-btn-secondary:hover { background: var(--sl-bg-hover); }

/* chips */
.sl-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 9px; cursor: pointer;
    background: var(--sl-bg-chip); border: 1px solid var(--sl-line-2);
    color: var(--sl-text-mid); font-family: var(--sl-font-ui);
    font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.sl-chip:hover { background: var(--sl-bg-hover); }
.sl-chip.is-active {
    background: var(--sl-sky-14); border-color: var(--sl-sky-35); color: var(--sl-sky-text);
}
.sl-chip.is-active-amber {
    background: var(--sl-amber-14); border-color: var(--sl-amber-40); color: var(--sl-amber);
}
.sl-chip-count {
    font-family: var(--sl-font-mono); font-size: 10px;
    background: oklch(1 0 0 / 0.08); padding: 1px 6px; border-radius: 20px;
}

/* uppercase mono kicker labels */
.sl-kicker {
    font-family: var(--sl-font-mono); font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--sl-text-ghost);
}

/* search field */
.sl-search {
    display: flex; align-items: center; gap: 9px;
    background: var(--sl-bg-rail); border: 1px solid var(--sl-line-2);
    border-radius: 11px; padding: 9px 13px; color: var(--sl-text-faint);
}
.sl-search input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    font-family: var(--sl-font-ui); font-size: 13px; color: var(--sl-text);
}
.sl-search input::placeholder { color: var(--sl-text-faint); }
.sl-kbd {
    font-family: var(--sl-font-mono); font-size: 10px; color: var(--sl-text-faint);
    border: 1px solid var(--sl-line-3); border-radius: 5px; padding: 2px 6px;
}

/* gen ring (conic) — JS sets --p (0-100), --ring-color, --ring-hole */
.sl-ring {
    --p: 0; --ring-color: var(--sl-amber); --ring-hole: var(--sl-bg-card);
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    background: conic-gradient(var(--ring-color) calc(var(--p) * 3.6deg), var(--sl-ring-track) 0);
    display: flex; align-items: center; justify-content: center;
}
.sl-ring .sl-ring-hole {
    width: 27px; height: 27px; border-radius: 50%; background: var(--ring-hole);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sl-font-mono); font-size: 9.5px; font-weight: 600;
    color: var(--ring-color); font-variant-numeric: tabular-nums;
}
.sl-ring.sl-ring--sm { width: 30px; height: 30px; }
.sl-ring.sl-ring--sm .sl-ring-hole { width: 22px; height: 22px; font-size: 8.5px; }

/* segmented control */
.sl-seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--sl-bg-rail); border: 1px solid var(--sl-line); border-radius: 9px;
}
.sl-seg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 5px 11px; border: none; border-radius: var(--sl-r-xs);
    background: transparent; color: var(--sl-text-faint);
    font-family: var(--sl-font-ui); font-size: 11.5px; font-weight: 500; cursor: pointer;
}
.sl-seg-btn:hover { color: var(--sl-text); }
.sl-seg-btn.is-active { background: var(--sl-bg-active); color: var(--sl-text-hi); font-weight: 600; }

/* popovers + menus */
.sl-popover {
    background: var(--sl-bg-pop); border: 1px solid var(--sl-line-pop);
    border-radius: 12px; box-shadow: var(--sl-shadow-pop); padding: 5px;
    z-index: 300;
}
.sl-menu-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    color: var(--sl-text); font-family: var(--sl-font-ui); font-size: 12.5px; font-weight: 500;
}
.sl-menu-item:hover { background: oklch(1 0 0 / 0.06); }
.sl-menu-item.is-danger { color: var(--sl-red-text); }
.sl-menu-item.is-danger:hover { background: var(--sl-red-12); }
.sl-menu-sep { height: 1px; background: var(--sl-line-2); margin: 4px 6px; }

/* checkbox */
.sl-check {
    width: 16px; height: 16px; border-radius: 5px; flex: none; cursor: pointer;
    border: 1.5px solid oklch(1 0 0 / 0.18); background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: transparent;
}
.sl-check.is-checked { background: var(--sl-sky); border-color: var(--sl-sky); color: var(--sl-on-sky); }

/* cards */
.sl-card {
    background: var(--sl-bg-card); border: 1px solid var(--sl-line-2);
    border-radius: var(--sl-r-lg);
}
.sl-card:hover { background: var(--sl-bg-pop); border-color: oklch(1 0 0 / 0.12); }

/* nav rail item */
.sl-navitem {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    color: var(--sl-text-nav); font-family: var(--sl-font-ui);
    font-size: 14px; font-weight: 500; text-decoration: none;
    border: none; background: transparent; width: 100%; text-align: left;
}
.sl-navitem:hover { background: oklch(1 0 0 / 0.05); }
.sl-navitem.is-active { background: var(--sl-bg-hover); color: var(--sl-text-hi); font-weight: 600; }
.sl-navitem.is-active .sl-navicon { color: var(--sl-sky-icon); }
.sl-navicon { display: inline-flex; flex: none; color: currentColor; }

/* modal */
.sl-scrim {
    position: fixed; inset: 0; background: oklch(0 0 0 / 0.55);
    display: flex; align-items: center; justify-content: center; z-index: 400;
}
.sl-modal {
    background: oklch(0.22 0.006 250); border: 1px solid oklch(1 0 0 / 0.12);
    border-radius: 16px; box-shadow: var(--sl-shadow-modal); padding: 22px 24px;
}

/* progress bar */
.sl-progress {
    height: 6px; border-radius: 3px; background: oklch(1 0 0 / 0.08);
    overflow: hidden; position: relative;
}
.sl-progress > span {
    display: block; height: 100%; border-radius: 3px;
    background: oklch(0.72 0.15 155);
}

/* small badges */
.sl-badge-role {
    font-family: var(--sl-font-ui); font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    background: var(--sl-sky-12); color: var(--sl-sky-text);
    padding: 2px 7px; border-radius: 5px;
}
.sl-lang-tag {
    font-family: var(--sl-font-mono); font-size: 10px; font-weight: 600;
    background: oklch(1 0 0 / 0.07); color: var(--sl-text);
    padding: 2px 7px; border-radius: 5px;
}
.sl-lang-tag.on-thumb { background: oklch(0 0 0 / 0.5); color: #fff; }