/* OKHBOT DESIGN SYSTEM / 2.6.23
   One visual contract for public pages + all workspace roles.
   No changes to business rules or animation timelines. Existing state colors remain semantic.
*/
:root {
  /* Identity */
  --ok23-ink:#23213F;
  --ok23-ink-strong:#1E1D38;
  --ok23-muted:#696782;
  --ok23-muted-light:#8E8BA6;
  --ok23-primary:#6656E9;
  --ok23-primary-hover:#5141CF;
  --ok23-primary-tint:#EFECFF;
  --ok23-primary-stroke:#D9D2FC;
  --ok23-teal:#37B99B;
  --ok23-teal-tint:#DFF6F0;
  --ok23-blue:#629CEB;
  --ok23-orange:#EF9860;
  --ok23-paper:#FAF9FF;
  --ok23-canvas:#F7F6FF;
  --ok23-surface:#FFFFFF;
  --ok23-surface-soft:#F9F8FF;
  --ok23-border:#E5E1F3;
  --ok23-border-strong:#CEC5F4;
  --ok23-focus:#8C7DF4;
  --ok23-success:#16896F;
  --ok23-danger:#B9475A;
  --ok23-warning:#9A6A20;

  /* Rhythm and geometry */
  --ok23-radius-xs:8px;
  --ok23-radius-control:12px;
  --ok23-radius-inner:16px;
  --ok23-radius-card:24px;
  --ok23-radius-feature:30px;
  --ok23-radius-pill:999px;
  --ok23-height-sm:40px;
  --ok23-height-md:48px;
  --ok23-height-lg:52px;
  --ok23-icon-size:18px;
  --ok23-icon-small:16px;
  --ok23-icon-large:20px;
  --ok23-icon-button:44px;
  --ok23-card-padding:24px;
  --ok23-card-border:1px solid var(--ok23-border);
  --ok23-card-shadow:0 14px 35px rgba(51,38,118,.06);
  --ok23-card-shadow-hover:0 22px 45px rgba(51,38,118,.11);
  --ok23-ease:cubic-bezier(.2,.72,.22,1);

  /* Compatibility with foundational components */
  --purple:var(--ok23-primary);
  --purpleDark:var(--ok23-primary-hover);
  --ink:var(--ok23-ink);
  --muted:var(--ok23-muted);
  --line:var(--ok23-border);
  --bg:var(--ok23-canvas);
  --ok17-violet:var(--ok23-primary);
  --ok17-ink:var(--ok23-ink);
  --ok21-violet:var(--ok23-primary);
  --ok21-ink:var(--ok23-ink);
  --ok22-violet:var(--ok23-primary);
  --v22-border:var(--ok23-border);
}

/* Unambiguous type system. Do not resize portfolio artwork typography. */
.ok22-public-site,
.v22-shell { color:var(--ok23-ink); }
.ok22-public-site :is(.ok20-hero-note,.ok20-section-heading p,.ok21-centered p,.ok21-section-heading p,.ok21-showroom-heading p),
.ok17-work-active .v22-shell :is(.v22-panel-desc,.page-heading>div>p:not(.eyebrow)) { color:var(--ok23-muted); }

/* Shared UI controls. Hero / page action buttons, not illustrated widgets. */
.ok22-public-site :is(
  .ok23-button,.ok20-button,.ok21-btn,.ok20-plan-action,.ok20-more-work,
  .ok21-plan-body>button,.ok264-service-head>button,.ok264-outline-link,
  .ok21-all-button
),
.ok17-work-active .v22-shell :is(.ok23-button,.v22-primary-action){
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  min-height:var(--ok23-height-lg);
  padding:11px 20px;
  border-radius:var(--ok23-radius-control);
  font-size:15px;
  font-weight:800;
  line-height:1.35;
  transition:background-color .2s var(--ok23-ease),border-color .2s var(--ok23-ease),color .2s var(--ok23-ease),box-shadow .2s var(--ok23-ease),transform .2s var(--ok23-ease);
}
.ok22-public-site :is(.ok23-button,.ok20-button,.ok21-btn.main,.ok20-plan-action,.ok20-more-work,.ok21-plan-body>button,.ok264-service-head>button),
.ok17-work-active .v22-shell :is(.ok23-button:not(.outline):not(.ghost):not(.danger),.v22-primary-action){
  background:var(--ok23-primary);
  border:1px solid var(--ok23-primary);
  color:#fff;
  box-shadow:0 8px 20px rgba(102,86,233,.12);
}
/* Clear second action. Do not use conflicting brand orange/green for submit controls. */
.ok22-public-site :is(.ok20-orange-button,.ok21-btn.outline,.ok264-outline-link,.ok21-all-button,.ok23-button.outline),
.ok17-work-active .v22-shell :is(.ok23-button.outline,.ok23-button.ghost){
  background:var(--ok23-surface);
  border:1px solid var(--ok23-primary-stroke);
  color:var(--ok23-ink);
  box-shadow:none;
}
.ok22-public-site :is(.ok23-button,.ok20-button,.ok21-btn,.ok20-plan-action,.ok20-more-work,.ok21-plan-body>button,.ok264-service-head>button,.ok264-outline-link,.ok21-all-button):hover:not(:disabled),
.ok17-work-active .v22-shell :is(.ok23-button,.v22-primary-action):hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 11px 26px rgba(88,70,186,.16);
}
.ok22-public-site :is(.ok20-orange-button,.ok21-btn.outline,.ok264-outline-link,.ok21-all-button,.ok23-button.outline):hover:not(:disabled),
.ok17-work-active .v22-shell :is(.ok23-button.outline,.ok23-button.ghost):hover:not(:disabled){
  background:var(--ok23-primary-tint);
  border-color:var(--ok23-primary-stroke);
  color:var(--ok23-primary-hover);
}
.ok22-public-site :is(.ok20-green-button,.ok21-btn.main,.ok20-plan-action,.ok20-more-work,.ok21-plan-body>button,.ok264-service-head>button):hover:not(:disabled),
.ok17-work-active .v22-shell :is(.ok23-button:not(.outline):not(.ghost):not(.danger),.v22-primary-action):hover:not(:disabled){
  background:var(--ok23-primary-hover);
  border-color:var(--ok23-primary-hover);
}
.ok17-work-active .v22-shell .ok23-button.danger{
  background:#fff;border:1px solid #EBC5CE;color:var(--ok23-danger);box-shadow:none;
}
.ok17-work-active .v22-shell .ok23-button.small{
  min-height:var(--ok23-height-sm);padding:8px 14px;font-size:13px;
}
.ok22-public-site .ok20-plan-card.featured .ok20-plan-action{
  background:var(--ok23-primary);border-color:var(--ok23-primary);color:#fff;
}
.ok22-public-site .ok264-service-website .ok264-service-head>button{
  background:var(--ok23-primary);border-color:var(--ok23-primary);color:#fff;
}

/* The icon sits on a common optical scale regardless of arrow glyph or inline SVG. */
.ok22-public-site :is(.ok20-button,.ok21-btn,.ok20-plan-action,.ok20-more-work,.ok21-plan-body>button,.ok264-service-head>button,.ok264-outline-link,.ok21-all-button,.ok23-button) > :is(span[aria-hidden="true"],b[aria-hidden="true"]),
.ok22-public-site :is(.ok20-work-meta,.ok21-template-card>span) > i,
.ok17-work-active .v22-shell .ok23-button > [aria-hidden="true"]{
  font-size:var(--ok23-icon-size);
  font-family:Inter,Arial,sans-serif;
  font-weight:700;
  font-style:normal;
  line-height:1;
  min-width:var(--ok23-icon-size);
  height:var(--ok23-icon-size);
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
}
.ok22-public-site :is(.ok23-button,.ok20-button,.ok21-btn,.ok21-plan-body>button) svg,
.ok17-work-active .v22-shell :is(.ok23-button,.v22-primary-action) svg{
  width:var(--ok23-icon-size);height:var(--ok23-icon-size);flex:0 0 auto;
}
/* Use same icon-only target dimensions, but preserve touch sizes. */
.ok22-public-site :is(.ok21-arrow,.ok261-showroom-arrow),
.ok17-work-active .v22-shell :is(.v22-icon-button,.v22-header-icon,.ui-row-open){
  min-width:var(--ok23-icon-button);
  min-height:var(--ok23-icon-button);
  border-radius:var(--ok23-radius-control);
  display:inline-grid;place-items:center;
  font-size:var(--ok23-icon-large);
  line-height:1;
}
.ok22-public-site .ok21-arrow{width:48px;height:48px;background:rgba(255,255,255,.93);border-color:var(--ok23-primary-stroke);color:var(--ok23-primary);border-radius:var(--ok23-radius-control)}

/* Small filter chips and switches have one height, radius and selected identity. */
.ok22-public-site :is(.ok20-portfolio-filters button,.ok21-filter-row button,.ok20-lang button,.ok21-lang button,.ok21-showroom-device button),
.ok17-work-active .v22-shell :is(.admin-tabs button,.ui-preset-buttons button,.ui-table-extras button){
  min-height:var(--ok23-height-sm);
  padding:8px 15px;
  border-radius:var(--ok23-radius-pill);
  font-weight:800;
  font-size:14px;
  line-height:1.25;
}
.ok22-public-site :is(.ok20-portfolio-filters button,.ok21-filter-row button,.ok20-lang button,.ok21-lang button,.ok21-showroom-device button):not(.active):not(.selected),
.ok17-work-active .v22-shell .admin-tabs button:not(.on):not(.active){
  background:var(--ok23-surface);border:1px solid var(--ok23-border);color:var(--ok23-muted);
}
.ok22-public-site :is(.ok20-portfolio-filters button.selected,.ok21-filter-row button.active,.ok20-lang button.selected,.ok21-lang button.active,.ok21-showroom-device button.active),
.ok17-work-active .v22-shell .admin-tabs button:is(.on,.active){
  background:var(--ok23-primary);border:1px solid var(--ok23-primary);color:#fff;
}
/* Service categories retain intentional colors but follow a single geometry. */
.ok22-public-site .ok20-type-pill{
  border-radius:var(--ok23-radius-pill);
  min-height:var(--ok23-height-lg);
  padding:9px 22px;
  font-size:clamp(16px,1.8vw,23px);
  box-shadow:0 9px 21px rgba(50,37,135,.075);
}
.ok22-public-site .ok20-type-pill i{font-size:var(--ok23-icon-size)}

/* Cards: matching shape, borders, depth across public product and dashboard content. */
.ok22-public-site :is(.ok20-work-card,.ok21-template-card,.ok20-plan-card,.ok21-plan),
.ok17-work-active .v22-shell :is(.tile,.form-card,.plan-card,.v22-panel,.stat-card,.ops-metric,.smart-metric,.admin-metric,.v22-kpis>button){
  border-radius:var(--ok23-radius-card);
  border:var(--ok23-card-border);
  box-shadow:var(--ok23-card-shadow);
  background-color:var(--ok23-surface);
}
.ok22-public-site :is(.ok20-work-card,.ok21-template-card,.ok20-plan-card,.ok21-plan):hover,
.ok17-work-active .v22-shell :is(.tile,.v22-panel,.v22-kpis>button,.stat-card,.smart-metric,.admin-metric):hover{
  box-shadow:var(--ok23-card-shadow-hover);
  border-color:var(--ok23-primary-stroke);
}
/* Keep intentional dark featured plan and illustrated service cards. */
.ok22-public-site .ok20-plan-card.featured{
  background:#25243E;border-color:#504982;box-shadow:0 20px 46px rgba(38,27,91,.13);
}
.ok22-public-site .ok21-plan.featured{border-color:var(--ok23-primary);box-shadow:0 18px 40px rgba(74,54,167,.12)}
.ok22-public-site :is(.ok20-faq-item,.ok21-faq-items details),
.ok17-work-active .v22-shell :is(.v22-create-menu,.v22-notifications,.ui-filter-panel){
  border-radius:var(--ok23-radius-inner);
  border:var(--ok23-card-border);
  background:var(--ok23-surface);
}
.ok22-public-site :is(.ok20-faq-item,.ok21-faq-items details)[open]{border-color:var(--ok23-primary-stroke)}
.ok22-public-site :is(.ok20-faq-item,.ok21-faq-items details) summary b{color:var(--ok23-primary);font-size:var(--ok23-icon-large)}

/* Workspace forms and interactive regions. Keep data tables compact, no entrance animations added. */
.ok17-work-active .v22-shell :is(.ok23-field input,.ok23-field textarea,.ok23-field select,.field input,.field textarea,.field select){
  border-radius:var(--ok23-radius-control);
  border:1px solid var(--ok23-border-strong);
  background:var(--ok23-surface);
  color:var(--ok23-ink);
}
.ok17-work-active .v22-shell :is(input,select):not([type=checkbox]):not([type=radio]):not([type=range]){min-height:44px}
.ok17-work-active .v22-shell :is(.ok23-field input,.ok23-field textarea,.ok23-field select,.field input,.field textarea,.field select):focus-visible{
  outline:2px solid var(--ok23-focus);outline-offset:2px;border-color:var(--ok23-focus);
}
.ok17-work-active .v22-shell :is(.v22-app-header,.sidebar,.ui-responsive-table thead th){border-color:var(--ok23-border)}
.ok17-work-active .v22-shell :is(.sidebar .nav-entry.on,.admin-tabs){background:var(--ok23-primary-tint)}
.ok17-work-active .v22-shell .nav-symbol{width:20px;min-width:20px;font-size:var(--ok23-icon-size);line-height:1;display:inline-grid;place-items:center}
.ok17-work-active .v22-shell .v22-primary-action>span{font-size:var(--ok23-icon-size);line-height:1}
.ok17-work-active .v22-shell .ok23-tag{border-radius:var(--ok23-radius-pill);font-size:13px;font-weight:800}

/* In one place, accessibility and interaction constraints. */
.ok22-public-site :is(button,a,summary):focus-visible,
.ok17-work-active .v22-shell :is(button,a,summary):focus-visible{
  outline:3px solid var(--ok23-focus);outline-offset:3px;
}
.ok22-public-site button:disabled,
.ok17-work-active .v22-shell button:disabled{cursor:not-allowed;opacity:.56;box-shadow:none}
@media(max-width:600px){
  .ok22-public-site :is(.ok23-button,.ok20-button,.ok21-btn,.ok20-plan-action,.ok20-more-work,.ok21-plan-body>button,.ok264-service-head>button,.ok264-outline-link){
    font-size:14px;min-height:48px;padding:10px 15px;gap:9px;
  }
  .ok22-public-site :is(.ok20-portfolio-filters button,.ok21-filter-row button,.ok20-lang button,.ok21-lang button,.ok21-showroom-device button){font-size:13px;min-height:38px;padding:7px 11px}
  .ok22-public-site :is(.ok20-work-card,.ok21-template-card,.ok20-plan-card,.ok21-plan),
  .ok17-work-active .v22-shell :is(.tile,.form-card,.plan-card,.v22-panel){border-radius:20px}
  .ok22-public-site .ok20-type-pill{font-size:16px;min-height:44px;padding:8px 15px}
}
@media(prefers-reduced-motion:reduce){
  .ok22-public-site :is(.ok23-button,.ok20-button,.ok21-btn,.ok20-plan-action,.ok20-more-work,.ok21-plan-body>button,.ok264-service-head>button,.ok264-outline-link),
  .ok17-work-active .v22-shell :is(.ok23-button,.v22-primary-action){transition:none!important}
}
/* Fit workspace header actions inside narrow mobile viewports without clipping the bell. */
@media(max-width:520px){
  .ok17-work-active .v22-shell .v22-app-header{padding-inline:9px;gap:6px}
  .ok17-work-active .v22-shell .v22-header-right{gap:4px}
}