/* =====================================================================
   UWK «دوام» Design System — derived from the Cal.com DESIGN.md (alpha).
   Clean white canvas · near-black primary · Inter display + IBM Plex Sans
   Arabic · soft-rounded cards · generous whitespace · dark footer close.
   RTL-native (logical properties). Namespaced `ds-`. Token-first; never
   inline hex in consumers — reference the custom properties below.
   ===================================================================== */

:root{
  /* ── Colors: brand & ink ── */
  --ds-primary:#111111; --ds-primary-active:#242424; --ds-primary-disabled:#e5e7eb;
  --ds-ink:#111111; --ds-body:#374151; --ds-muted:#6b7280; --ds-muted-soft:#898989;
  --ds-on-primary:#ffffff; --ds-on-dark:#ffffff; --ds-on-dark-soft:#a1a1aa;
  --ds-brand-accent:#3b82f6;
  /* ── Surfaces ── */
  --ds-canvas:#ffffff; --ds-surface-soft:#f8f9fa; --ds-surface-card:#f5f5f5;
  --ds-surface-strong:#e5e7eb; --ds-surface-dark:#101010; --ds-surface-dark-elevated:#1a1a1a;
  --ds-hairline:#e5e7eb; --ds-hairline-soft:#f3f4f6;
  /* ── Semantic ── */
  --ds-success:#10b981; --ds-warning:#f59e0b; --ds-error:#ef4444;
  /* readable on-white variants of the semantics (the bright tokens fail AA at small sizes) */
  --ds-success-ink:#0f9d6e; --ds-warning-ink:#b9710a; --ds-error-ink:#d83a36;
  --ds-success-bg:#e7f7f0; --ds-warning-bg:#fdf3e6; --ds-error-bg:#fdeceb;
  /* ── Badge pastels (avatars / tags only — never on CTAs) ── */
  --ds-badge-orange:#fb923c; --ds-badge-pink:#ec4899; --ds-badge-violet:#8b5cf6; --ds-badge-emerald:#34d399;
  /* ── Radii ── */
  --ds-r-xs:4px; --ds-r-sm:6px; --ds-r-md:8px; --ds-r-lg:12px; --ds-r-xl:16px; --ds-r-pill:9999px; --ds-r-full:9999px;
  /* ── Spacing (base 4px) ── */
  --ds-sp-xxs:4px; --ds-sp-xs:8px; --ds-sp-sm:12px; --ds-sp-md:16px; --ds-sp-lg:24px; --ds-sp-xl:32px; --ds-sp-xxl:48px; --ds-sp-section:96px;
  /* ── Elevation ── */
  --ds-sh-sm:0 1px 2px rgba(0,0,0,.05); --ds-sh-md:0 4px 12px rgba(0,0,0,.08); --ds-sh-lg:0 8px 24px rgba(0,0,0,.10);
  /* ── Type families ── */
  --ds-font-display:'Inter','IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ds-font-body:'IBM Plex Sans Arabic','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ds-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* ── Layout ── */
  --ds-content-max:1200px;
}

/* ── Base ── */
.ds-root{font-family:var(--ds-font-body);color:var(--ds-body);background:var(--ds-canvas);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.ds-num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-family:var(--ds-font-display)}

/* ── Typography scale (display = Inter 600 + negative tracking, the Cal Sans substitute) ── */
.ds-display-xl{font-family:var(--ds-font-display);font-size:64px;font-weight:600;line-height:1.05;letter-spacing:-.04em;color:var(--ds-ink)}
.ds-display-lg{font-family:var(--ds-font-display);font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-.035em;color:var(--ds-ink)}
.ds-display-md{font-family:var(--ds-font-display);font-size:36px;font-weight:600;line-height:1.15;letter-spacing:-.03em;color:var(--ds-ink)}
.ds-display-sm{font-family:var(--ds-font-display);font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--ds-ink)}
.ds-title-lg{font-family:var(--ds-font-display);font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--ds-ink)}
.ds-title-md{font-size:18px;font-weight:600;line-height:1.4;color:var(--ds-ink)}
.ds-title-sm{font-size:16px;font-weight:600;line-height:1.4;color:var(--ds-ink)}
.ds-body-md{font-size:16px;font-weight:400;line-height:1.5;color:var(--ds-body)}
.ds-body-sm{font-size:14px;font-weight:400;line-height:1.5;color:var(--ds-body)}
.ds-caption{font-size:13px;font-weight:500;line-height:1.4;color:var(--ds-muted)}
.ds-code{font-family:var(--ds-font-mono);font-size:14px;font-weight:400;line-height:1.5}

/* ── Buttons ── */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-sp-xs);
  font-family:var(--ds-font-body);font-size:14px;font-weight:600;line-height:1;height:40px;padding:0 20px;
  border-radius:var(--ds-r-md);border:1px solid transparent;background:var(--ds-primary);color:var(--ds-on-primary);
  cursor:pointer;transition:background .15s,box-shadow .15s,transform .05s}
.ds-btn:active{background:var(--ds-primary-active);transform:translateY(1px)}
.ds-btn[disabled]{background:var(--ds-primary-disabled);color:var(--ds-muted);cursor:not-allowed}
.ds-btn--secondary{background:var(--ds-canvas);color:var(--ds-ink);border-color:var(--ds-hairline)}
.ds-btn--secondary:active{background:var(--ds-surface-soft)}
.ds-btn--text{background:transparent;color:var(--ds-ink);border:0;padding:0 4px;height:auto}
.ds-btn--icon{width:36px;height:36px;padding:0;border-radius:var(--ds-r-full);background:var(--ds-canvas);color:var(--ds-ink);border:1px solid var(--ds-hairline)}
.ds-btn--lg{height:48px;padding:0 28px;font-size:15px}
.ds-btn--sm{height:34px;padding:0 14px;font-size:13px}
.ds-btn--block{width:100%}

/* ── Nav-pill-group (signature pill-in-pill) + category tabs ── */
.ds-pill-group{display:inline-flex;gap:2px;background:var(--ds-surface-soft);border-radius:var(--ds-r-pill);padding:6px}
.ds-tab{padding:8px 14px;border:0;background:transparent;color:var(--ds-muted);font-family:var(--ds-font-body);
  font-size:14px;font-weight:500;border-radius:var(--ds-r-md);cursor:pointer}
.ds-tab[aria-selected="true"],.ds-tab.is-active{background:var(--ds-canvas);color:var(--ds-ink);box-shadow:var(--ds-sh-sm)}

/* ── Inputs ── */
.ds-input{width:100%;height:40px;padding:10px 14px;font-family:var(--ds-font-body);font-size:16px;color:var(--ds-ink);
  background:var(--ds-canvas);border:1px solid var(--ds-hairline);border-radius:var(--ds-r-md);outline:none;transition:border-color .15s,box-shadow .15s}
.ds-input::placeholder{color:var(--ds-muted-soft)}
.ds-input:focus{border-color:var(--ds-ink);box-shadow:0 0 0 3px rgba(17,17,17,.06)}
.ds-label{display:block;font-size:13px;font-weight:500;color:var(--ds-muted);margin-block-end:6px}

/* ── Cards ── */
.ds-card{background:var(--ds-canvas);border:1px solid var(--ds-hairline);border-radius:var(--ds-r-lg);padding:var(--ds-sp-lg)}
.ds-card--feature{background:var(--ds-surface-card);border-color:transparent;padding:var(--ds-sp-xl)}
.ds-card--elevated{box-shadow:var(--ds-sh-md);border-color:transparent}
.ds-card--dark{background:var(--ds-surface-dark);color:var(--ds-on-dark);border-color:transparent}
.ds-card--dark .ds-title-lg,.ds-card--dark .ds-display-sm{color:var(--ds-on-dark)}

/* ── Badges / pills / avatars ── */
.ds-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:var(--ds-r-pill);
  font-size:13px;font-weight:500;background:var(--ds-surface-card);color:var(--ds-ink);border:1px solid transparent}
.ds-badge--success{background:var(--ds-success-bg);color:var(--ds-success-ink)}
.ds-badge--warning{background:var(--ds-warning-bg);color:var(--ds-warning-ink)}
.ds-badge--error{background:var(--ds-error-bg);color:var(--ds-error-ink)}
.ds-badge--outline{background:var(--ds-canvas);color:var(--ds-muted);border-color:var(--ds-hairline)}
.ds-status-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.ds-avatar{width:36px;height:36px;border-radius:var(--ds-r-full);display:grid;place-items:center;
  background:var(--ds-surface-card);color:var(--ds-ink);font-weight:600;font-size:13px;flex-shrink:0}

/* ── Footer (the one dark surface that closes a page) ── */
.ds-footer{background:var(--ds-surface-dark);color:var(--ds-on-dark-soft);padding:64px var(--ds-sp-md)}
.ds-footer a{color:var(--ds-on-dark-soft)} .ds-footer a:hover{color:var(--ds-on-dark)}

/* ── List row (app primitive: avatar | body | trailing) ── */
.ds-row{display:flex;align-items:center;gap:12px;padding:14px;border-block-start:1px solid var(--ds-hairline-soft)}
.ds-row:first-child{border-block-start:0}
.ds-row__title{font-weight:600;font-size:15px;color:var(--ds-ink)}
.ds-row__meta{font-size:13px;color:var(--ds-muted);margin-block-start:2px}

/* ── Layout helpers ── */
.ds-container{max-width:var(--ds-content-max);margin-inline:auto;padding-inline:var(--ds-sp-md)}
.ds-grid{display:grid;gap:var(--ds-sp-lg)}
@media(min-width:768px){.ds-grid--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ds-grid--3{grid-template-columns:repeat(3,1fr)}.ds-grid--4{grid-template-columns:repeat(4,1fr)}}
.ds-focusable:focus-visible{outline:2px solid var(--ds-ink);outline-offset:2px;border-radius:4px}