/**
 * Zibayab Design Foundation v3 — Phase 0 (2026)
 *
 * One compact visual contract for the public product. Existing page templates
 * keep working through compatibility aliases; new/rebuilt surfaces should use
 * the semantic .zy-ui-* primitives and tokens below.
 *
 * Fresha palette (light): #FFFFFF #F3F1EF #060911 #7B69FF #D5D3FF #C5FF00
 * Fresha palette (dark):  #060911 #1A0826 #383A41 #FFFFFF #F3F1EF #7B69FF #C5FF00
 */

:root{
  /* Semantic surfaces */
  --zy-ui-canvas:var(--zy-bg);
  --zy-ui-surface:var(--zy-surface);
  --zy-ui-surface-subtle:var(--zy-brand-soft);
  --zy-ui-text:var(--zy-ink);
  --zy-ui-text-secondary:var(--zy-ink-2);
  --zy-ui-text-muted:var(--zy-muted);
  --zy-ui-border:var(--zy-line);
  --zy-ui-border-strong:var(--zy-line-strong);

  /* Action hierarchy follows Fresha: near-black/white primary actions, Prince for focus and brand signals. */
  --zy-ui-action:var(--zy-action-primary);
  --zy-ui-action-hover:var(--zy-action-primary-hover);
  --zy-ui-action-ink:var(--zy-action-primary-ink);
  --zy-ui-action-secondary-bg:var(--zy-surface);
  --zy-ui-action-secondary-ink:var(--zy-ink);
  --zy-ui-action-soft:var(--zy-brand-soft);
  --zy-ui-action-soft-ink:var(--zy-brand-strong);

  /* Typography */
  --zy-ui-font-xs:.75rem;
  --zy-ui-font-sm:.875rem;
  --zy-ui-font-md:1rem;
  --zy-ui-font-lg:1.125rem;
  --zy-ui-font-xl:clamp(1.25rem,1.08rem + .5vw,1.55rem);
  --zy-ui-font-2xl:clamp(1.5rem,1.2rem + .9vw,2.05rem);
  --zy-ui-font-3xl:clamp(2rem,1.45rem + 1.6vw,3.5rem);
  --zy-ui-weight-regular:400;
  --zy-ui-weight-medium:500;
  --zy-ui-weight-strong:600;
  --zy-ui-weight-display:700;
  --zy-ui-leading-tight:1.28;
  --zy-ui-leading-ui:1.45;
  --zy-ui-leading-copy:1.6;

  /* 4px spacing rhythm */
  --zy-ui-space-1:4px;
  --zy-ui-space-2:8px;
  --zy-ui-space-3:12px;
  --zy-ui-space-4:16px;
  --zy-ui-space-5:20px;
  --zy-ui-space-6:24px;
  --zy-ui-space-8:32px;
  --zy-ui-space-10:40px;
  --zy-ui-space-12:48px;
  --zy-ui-space-16:64px;
  --zy-ui-section:clamp(38px,5vw,64px);

  /* Sharper marketplace geometry. Pills are reserved for metadata/filter chips. */
  --zy-ui-radius-xs:4px;
  --zy-ui-radius-sm:4px;
  --zy-ui-radius-control:6px;
  --zy-ui-radius-md:6px;
  --zy-ui-radius-card:8px;
  --zy-ui-radius-lg:8px;
  --zy-ui-radius-overlay:10px;
  --zy-ui-radius-xl:10px;
  --zy-ui-radius-pill:999px;
  --zy-ui-shadow-none:none;
  --zy-ui-shadow-float:0 14px 38px color-mix(in srgb,var(--zy-ink) 12%,transparent);

  /* Layout and interaction */
  --zy-ui-page:1180px;
  --zy-ui-reading:760px;
  --zy-ui-control:44px;
  --zy-ui-control-lg:48px;
  --zy-ui-focus:0 0 0 3px color-mix(in srgb,var(--zy-brand) 20%,transparent);
}

/* Type primitives */
.zy-ui-display{margin:0;color:var(--zy-ui-text);font-size:var(--zy-ui-font-3xl);font-weight:var(--zy-ui-weight-display);line-height:var(--zy-ui-leading-tight);letter-spacing:-.022em}
.zy-ui-title{margin:0;color:var(--zy-ui-text);font-size:var(--zy-ui-font-xl);font-weight:var(--zy-ui-weight-display);line-height:var(--zy-ui-leading-tight)}
.zy-ui-subtitle{margin:0;color:var(--zy-ui-text-secondary);font-size:var(--zy-ui-font-md);font-weight:var(--zy-ui-weight-medium);line-height:var(--zy-ui-leading-ui)}
.zy-ui-copy{color:var(--zy-ui-text-secondary);font-size:var(--zy-ui-font-md);font-weight:var(--zy-ui-weight-regular);line-height:var(--zy-ui-leading-copy)}
.zy-ui-meta{color:var(--zy-ui-text-muted);font-size:var(--zy-ui-font-sm);font-weight:var(--zy-ui-weight-medium);line-height:var(--zy-ui-leading-ui)}

/* Layout primitives: whitespace first, boxes only when they communicate grouping. */
.zy-ui-container{width:min(var(--zy-ui-page),calc(100% - 32px));margin-inline:auto}
.zy-ui-section{padding-block:var(--zy-ui-section)}
.zy-ui-section+.zy-ui-section{border-top:0}
.zy-ui-section__head{display:flex;align-items:end;justify-content:space-between;gap:var(--zy-ui-space-4);margin-bottom:var(--zy-ui-space-6)}
.zy-ui-divider{height:1px;border:0;background:var(--zy-ui-border)}

/* Shared card/panel primitives */
.zy-ui-card{min-width:0;border:1px solid var(--zy-ui-border);border-radius:var(--zy-ui-radius-card);background:var(--zy-ui-surface);box-shadow:none}
.zy-ui-card--padded{padding:var(--zy-ui-space-4)}
.zy-ui-panel{min-width:0;border:1px solid var(--zy-ui-border);border-radius:var(--zy-ui-radius-card);background:var(--zy-ui-surface);box-shadow:none}

/* Action hierarchy: one primary action per local decision surface. */
.zy-ui-action{min-height:var(--zy-ui-control);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border:1px solid transparent;border-radius:var(--zy-ui-radius-control);font:inherit;font-size:var(--zy-ui-font-sm);font-weight:var(--zy-ui-weight-strong);line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--zy-fast),border-color var(--zy-fast),color var(--zy-fast),transform var(--zy-fast),box-shadow var(--zy-fast)}
.zy-ui-action:hover{text-decoration:none}
.zy-ui-action:active{transform:translateY(1px)}
.zy-ui-action:focus-visible{outline:0;box-shadow:var(--zy-ui-focus)}
.zy-ui-action[disabled],.zy-ui-action[aria-disabled="true"]{opacity:.5;pointer-events:none}
.zy-ui-action--primary{background:var(--zy-ui-action);border-color:var(--zy-ui-action);color:var(--zy-ui-action-ink)}
.zy-ui-action--primary:hover{background:var(--zy-ui-action-hover);border-color:var(--zy-ui-action-hover);color:var(--zy-ui-action-ink)}
.zy-ui-action--secondary{background:var(--zy-ui-action-secondary-bg);border-color:var(--zy-ui-border-strong);color:var(--zy-ui-action-secondary-ink)}
.zy-ui-action--secondary:hover{background:var(--zy-ui-surface-subtle);border-color:var(--zy-ui-text-muted);color:var(--zy-ui-text)}
.zy-ui-action--tertiary{min-height:36px;padding-inline:8px;background:transparent;border-color:transparent;color:var(--zy-ui-text-secondary)}
.zy-ui-action--tertiary:hover{background:color-mix(in srgb,var(--zy-ink) 4%,transparent);color:var(--zy-ui-text)}
.zy-ui-action--quiet{background:var(--zy-ui-action-soft);border-color:transparent;color:var(--zy-ui-action-soft-ink)}
.zy-ui-action--block{width:100%}
.zy-ui-action--icon{width:var(--zy-ui-control);padding:0}
.zy-ui-action-group{display:flex;align-items:center;gap:var(--zy-ui-space-2);flex-wrap:wrap}

/* Form controls */
.zy-ui-field{width:100%;min-height:var(--zy-ui-control);padding:9px 11px;border:1px solid var(--zy-ui-border-strong);border-radius:var(--zy-ui-radius-control);background:var(--zy-ui-surface);color:var(--zy-ui-text);box-shadow:none}
.zy-ui-field::placeholder{color:color-mix(in srgb,var(--zy-ui-text-muted) 78%,transparent)}
.zy-ui-field:focus{border-color:var(--zy-brand);outline:0;box-shadow:var(--zy-ui-focus)}

/* Universal entity/provider list contract: flat by default. */
.zy-ui-entity{position:relative;min-width:0;padding:var(--zy-ui-space-4) 0;background:transparent;border:0;border-bottom:1px solid var(--zy-ui-border);border-radius:0;box-shadow:none}
.zy-ui-entity:last-child{border-bottom:0}
.zy-ui-entity__actions{display:flex;align-items:center;gap:var(--zy-ui-space-2);margin-top:var(--zy-ui-space-4)}

/* Data table contract for City×Service and other comparison surfaces. */
.zy-ui-table-wrap{width:100%;overflow-x:auto;border:0;background:transparent}
.zy-ui-table{width:100%;border-collapse:collapse;border-spacing:0;background:transparent;color:var(--zy-ui-text);font-size:var(--zy-ui-font-sm)}
.zy-ui-table th,.zy-ui-table td{padding:12px 10px;border-bottom:1px solid var(--zy-ui-border);text-align:start;vertical-align:middle}
.zy-ui-table th{color:var(--zy-ui-text-muted);font-size:var(--zy-ui-font-xs);font-weight:var(--zy-ui-weight-strong);background:transparent}
.zy-ui-table tbody tr:last-child td{border-bottom:0}
.zy-ui-table tbody tr:hover{background:color-mix(in srgb,var(--zy-brand) 3.5%,transparent)}

/* Chips are metadata/filter affordances, never competing primary CTAs. */
.zy-ui-chip{min-height:28px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid var(--zy-ui-border);border-radius:var(--zy-ui-radius-pill);background:transparent;color:var(--zy-ui-text-secondary);font-size:var(--zy-ui-font-xs);font-weight:var(--zy-ui-weight-medium);line-height:1}
.zy-ui-chip[aria-current="true"],.zy-ui-chip.is-active{border-color:color-mix(in srgb,var(--zy-brand) 36%,var(--zy-ui-border));background:var(--zy-brand-soft);color:var(--zy-brand-strong)}

/* Accessibility */
.zy-ui-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.zy-design-v3 :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:0;box-shadow:var(--zy-ui-focus)}

@media(max-width:720px){
  :root{--zy-ui-section:36px;--zy-ui-control:44px;--zy-ui-control-lg:48px}
  .zy-ui-container{width:min(100% - 24px,var(--zy-ui-page))}
  .zy-ui-section__head{align-items:start;flex-direction:column;margin-bottom:var(--zy-ui-space-5)}
  .zy-ui-action-group{width:100%}
}

@media(prefers-reduced-motion:reduce){.zy-ui-action{transition:none}}