/* ¦¦ Top-bar design tokens (exported from design.html) ¦¦
   Wire every top-bar control in style.css to these vars.   */
.lessons-top-bar {
    --tb-h:          34px;
    --tb-radius:     17px;
    --tb-font:       'Segoe UI', system-ui, sans-serif;
    --tb-size:       13px;
    --tb-weight:     600;
    --tb-tracking:   0px;
    --tb-uppercase:  normal;
    --tb-cx:         16px;
    --tb-gap:        8px;
    --tb-text:       rgb(226, 226, 230);
    --tb-muted:      rgb(154, 154, 164);
    --tb-bg:         color-mix(in srgb, #fff 5%, transparent);
    --tb-border:     rgb(69, 69, 78);
    --tb-hover-bg:   rgb(51, 51, 59);
    --tb-accent:     rgb(78, 201, 176);
    --tb-on-accent:  rgb(8, 34, 28);
    --tb-seg-active: rgb(67, 67, 77);
    --tb-shadow:     0 2px 10px rgba(0,0,0,.35);
    --tb-segments:   group;      /* group | pills */
    --tb-active:     fill;   /* fill | tint | solid | outline */
}