/*
 * Ecosystem Restaurant App UI System — Design Foundation 1.3.0
 * Presentation primitives only. No business logic, permissions, licensing or persistence.
 * Scope: Restaurant Suite portal/admin when ERSU App UI V2 is enabled.
 */

body.ersu-ui-v2{
  /* Brand */
  --eco-primary:#ff5a0a;
  --eco-primary-hover:#e84f00;
  --eco-primary-active:#cf4600;
  --eco-primary-soft:#fff1e8;
  --eco-secondary:#101b28;
  --eco-secondary-hover:#172536;
  --eco-accent:#0d9c8b;
  --eco-accent-soft:#e9f8f6;

  /* Surfaces */
  --eco-bg:#f6f7fb;
  --eco-surface:#ffffff;
  --eco-surface-secondary:#f9fafb;
  --eco-surface-tertiary:#f2f4f7;
  --eco-overlay:rgba(15,23,42,.56);

  /* Text */
  --eco-text:#111827;
  --eco-text-secondary:#475467;
  --eco-muted:#667085;
  --eco-subtle:#98a2b3;
  --eco-on-primary:#ffffff;
  --eco-on-dark:#f8fafc;

  /* Borders */
  --eco-border:#e4e7ec;
  --eco-border-soft:#eef1f5;
  --eco-border-strong:#d0d5dd;

  /* Semantic */
  --eco-success:#168a45;
  --eco-success-soft:#ecfdf3;
  --eco-warning:#b96a00;
  --eco-warning-soft:#fff7e8;
  --eco-danger:#c43245;
  --eco-danger-soft:#fff0f2;
  --eco-info:#2563eb;
  --eco-info-soft:#eef4ff;

  /* Supporting palette */
  --eco-green:#21a54b;
  --eco-green-soft:#eef9ef;
  --eco-teal:#0d9c8b;
  --eco-teal-soft:#e9f8f6;
  --eco-blue:#3478f6;
  --eco-blue-soft:#edf5ff;
  --eco-purple:#7654dc;
  --eco-purple-soft:#f3efff;
  --eco-amber:#ef9500;
  --eco-amber-soft:#fff6e5;
  --eco-rose:#ef5c6c;
  --eco-rose-soft:#fff0f2;

  /* Radius */
  --eco-radius-xs:7px;
  --eco-radius-sm:10px;
  --eco-radius-md:14px;
  --eco-radius-lg:18px;
  --eco-radius-xl:24px;
  --eco-radius-pill:999px;

  /* Shadows */
  --eco-shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --eco-shadow-sm:0 4px 14px rgba(16,24,40,.05);
  --eco-shadow-md:0 10px 28px rgba(16,24,40,.08);
  --eco-shadow-lg:0 20px 48px rgba(16,24,40,.12);

  /* Spacing: compact but touch-safe */
  --eco-space-1:4px;
  --eco-space-2:8px;
  --eco-space-3:12px;
  --eco-space-4:16px;
  --eco-space-5:20px;
  --eco-space-6:24px;
  --eco-space-7:32px;
  --eco-space-8:40px;

  /* Type */
  --eco-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --eco-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --eco-display-size:clamp(28px,3.3vw,42px);
  --eco-h1-size:clamp(23px,2.4vw,32px);
  --eco-h2-size:clamp(19px,1.8vw,24px);
  --eco-h3-size:17px;
  --eco-title-size:15px;
  --eco-body-size:14px;
  --eco-small-size:12px;
  --eco-caption-size:11px;
  --eco-label-size:12px;
  --eco-line-tight:1.15;
  --eco-line-normal:1.45;

  /* Layout */
  --eco-header-height:58px;
  --eco-sidebar-width:224px;
  --eco-sidebar-collapsed-width:76px;
  --eco-bottom-nav-height:68px;
  --eco-content-max:1420px;
  --eco-touch-target:44px;
  --eco-safe-top:env(safe-area-inset-top,0px);
  --eco-safe-right:env(safe-area-inset-right,0px);
  --eco-safe-bottom:env(safe-area-inset-bottom,0px);
  --eco-safe-left:env(safe-area-inset-left,0px);

  /* Motion / focus */
  --eco-ease:cubic-bezier(.2,.7,.2,1);
  --eco-duration-fast:120ms;
  --eco-duration:180ms;
  --eco-focus-ring:0 0 0 3px rgba(255,90,10,.20);

  /* Backward-compatible aliases used by ERSU 1.x markup. */
  --ersu-orange:var(--eco-primary);
  --ersu-orange-2:#ff7a13;
  --ersu-orange-soft:var(--eco-primary-soft);
  --ersu-green:var(--eco-green);
  --ersu-green-soft:var(--eco-green-soft);
  --ersu-teal:var(--eco-teal);
  --ersu-teal-soft:var(--eco-teal-soft);
  --ersu-blue:var(--eco-blue);
  --ersu-blue-soft:var(--eco-blue-soft);
  --ersu-purple:var(--eco-purple);
  --ersu-purple-soft:var(--eco-purple-soft);
  --ersu-amber:var(--eco-amber);
  --ersu-amber-soft:var(--eco-amber-soft);
  --ersu-rose:var(--eco-rose);
  --ersu-rose-soft:var(--eco-rose-soft);
  --ersu-ink:var(--eco-text);
  --ersu-muted:var(--eco-muted);
  --ersu-line:var(--eco-border);
  --ersu-bg:var(--eco-bg);
  --ersu-card:var(--eco-surface);
  --ersu-sidebar:var(--eco-secondary);
  --ersu-sidebar-2:#0b1621;
}

/* Dark-ready token contract. It activates only when a future shell explicitly sets it. */
body.ersu-ui-v2[data-eco-theme="dark"]{
  --eco-bg:#0b1118;
  --eco-surface:#111a24;
  --eco-surface-secondary:#15202c;
  --eco-surface-tertiary:#1c2835;
  --eco-text:#f8fafc;
  --eco-text-secondary:#d0d5dd;
  --eco-muted:#98a2b3;
  --eco-subtle:#667085;
  --eco-border:#263443;
  --eco-border-soft:#1f2c39;
  --eco-border-strong:#344454;
  --eco-shadow-xs:0 1px 2px rgba(0,0,0,.16);
  --eco-shadow-sm:0 5px 18px rgba(0,0,0,.18);
  --eco-shadow-md:0 12px 30px rgba(0,0,0,.24);
  --eco-shadow-lg:0 22px 56px rgba(0,0,0,.32);
}

body.ersu-ui-v2 .eco-app,
body.ersu-ui-v2 .eco-component{
  font-family:var(--eco-font);
  color:var(--eco-text);
}

/* Typography primitives */
body.ersu-ui-v2 .eco-display{margin:0;font-size:var(--eco-display-size);line-height:1.02;letter-spacing:-.04em;font-weight:800;color:var(--eco-text)}
body.ersu-ui-v2 .eco-h1{margin:0;font-size:var(--eco-h1-size);line-height:1.08;letter-spacing:-.035em;font-weight:800;color:var(--eco-text)}
body.ersu-ui-v2 .eco-h2{margin:0;font-size:var(--eco-h2-size);line-height:1.12;letter-spacing:-.025em;font-weight:780;color:var(--eco-text)}
body.ersu-ui-v2 .eco-h3{margin:0;font-size:var(--eco-h3-size);line-height:1.2;font-weight:760;color:var(--eco-text)}
body.ersu-ui-v2 .eco-title{margin:0;font-size:var(--eco-title-size);line-height:1.25;font-weight:740;color:var(--eco-text)}
body.ersu-ui-v2 .eco-body{font-size:var(--eco-body-size);line-height:var(--eco-line-normal);color:var(--eco-text-secondary)}
body.ersu-ui-v2 .eco-small{font-size:var(--eco-small-size);line-height:1.4;color:var(--eco-muted)}
body.ersu-ui-v2 .eco-caption{font-size:var(--eco-caption-size);line-height:1.35;color:var(--eco-muted)}
body.ersu-ui-v2 .eco-label{font-size:var(--eco-label-size);line-height:1.25;font-weight:700;color:var(--eco-text-secondary)}

/* Layout primitives */
body.ersu-ui-v2 .eco-page{width:min(100%,var(--eco-content-max));margin-inline:auto;padding:var(--eco-space-4);box-sizing:border-box}
body.ersu-ui-v2 .eco-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--eco-space-4);margin-bottom:var(--eco-space-4)}
body.ersu-ui-v2 .eco-page-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--eco-space-2)}
body.ersu-ui-v2 .eco-grid{display:grid;gap:var(--eco-space-3)}
body.ersu-ui-v2 .eco-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.ersu-ui-v2 .eco-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.ersu-ui-v2 .eco-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
body.ersu-ui-v2 .eco-stack{display:flex;flex-direction:column;gap:var(--eco-space-3)}
body.ersu-ui-v2 .eco-row{display:flex;align-items:center;gap:var(--eco-space-2)}

/* Buttons */
body.ersu-ui-v2 .eco-button{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--eco-touch-target);padding:0 15px;border:1px solid transparent;border-radius:var(--eco-radius-sm);
  background:var(--eco-surface);color:var(--eco-text);font:700 var(--eco-small-size)/1 var(--eco-font);
  text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;
  transition:background var(--eco-duration-fast) var(--eco-ease),border-color var(--eco-duration-fast) var(--eco-ease),box-shadow var(--eco-duration-fast) var(--eco-ease),transform var(--eco-duration-fast) var(--eco-ease)
}
body.ersu-ui-v2 .eco-button:hover{border-color:var(--eco-border-strong);background:var(--eco-surface-secondary)}
body.ersu-ui-v2 .eco-button:active{transform:translateY(1px)}
body.ersu-ui-v2 .eco-button:focus-visible{outline:0;box-shadow:var(--eco-focus-ring)}
body.ersu-ui-v2 .eco-button:disabled,body.ersu-ui-v2 .eco-button[aria-disabled="true"]{opacity:.48;cursor:not-allowed;pointer-events:none}
body.ersu-ui-v2 .eco-button--primary{background:var(--eco-primary);border-color:var(--eco-primary);color:var(--eco-on-primary)}
body.ersu-ui-v2 .eco-button--primary:hover{background:var(--eco-primary-hover);border-color:var(--eco-primary-hover)}
body.ersu-ui-v2 .eco-button--secondary{background:var(--eco-secondary);border-color:var(--eco-secondary);color:var(--eco-on-dark)}
body.ersu-ui-v2 .eco-button--ghost{background:transparent;border-color:var(--eco-border);color:var(--eco-text)}
body.ersu-ui-v2 .eco-button--danger{background:var(--eco-danger);border-color:var(--eco-danger);color:#fff}
body.ersu-ui-v2 .eco-button--sm{min-height:36px;padding-inline:12px;font-size:11px}
body.ersu-ui-v2 .eco-button--icon{width:var(--eco-touch-target);padding:0}

/* Form controls */
body.ersu-ui-v2 .eco-field{display:grid;gap:6px}
body.ersu-ui-v2 .eco-field__hint{font-size:var(--eco-caption-size);line-height:1.35;color:var(--eco-muted)}
body.ersu-ui-v2 .eco-input,
body.ersu-ui-v2 .eco-select,
body.ersu-ui-v2 .eco-textarea{
  width:100%;min-height:var(--eco-touch-target);box-sizing:border-box;border:1px solid var(--eco-border);border-radius:var(--eco-radius-sm);
  background:var(--eco-surface);color:var(--eco-text);font:500 var(--eco-body-size)/1.35 var(--eco-font);box-shadow:var(--eco-shadow-xs);
  transition:border-color var(--eco-duration-fast) var(--eco-ease),box-shadow var(--eco-duration-fast) var(--eco-ease),background var(--eco-duration-fast) var(--eco-ease)
}
body.ersu-ui-v2 .eco-input,body.ersu-ui-v2 .eco-select{padding:0 12px}
body.ersu-ui-v2 .eco-textarea{min-height:108px;padding:11px 12px;resize:vertical}
body.ersu-ui-v2 .eco-input::placeholder,body.ersu-ui-v2 .eco-textarea::placeholder{color:var(--eco-subtle)}
body.ersu-ui-v2 .eco-input:focus,body.ersu-ui-v2 .eco-select:focus,body.ersu-ui-v2 .eco-textarea:focus{outline:0;border-color:var(--eco-primary);box-shadow:var(--eco-focus-ring)}
body.ersu-ui-v2 .eco-input:disabled,body.ersu-ui-v2 .eco-select:disabled,body.ersu-ui-v2 .eco-textarea:disabled{background:var(--eco-surface-tertiary);color:var(--eco-muted);cursor:not-allowed}

/* Cards */
body.ersu-ui-v2 .eco-card{min-width:0;border:1px solid var(--eco-border);border-radius:var(--eco-radius-md);background:var(--eco-surface);box-shadow:var(--eco-shadow-sm);overflow:hidden}
body.ersu-ui-v2 .eco-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--eco-space-3);padding:var(--eco-space-4);border-bottom:1px solid var(--eco-border-soft)}
body.ersu-ui-v2 .eco-card__body{padding:var(--eco-space-4)}
body.ersu-ui-v2 .eco-card__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--eco-space-2);padding:var(--eco-space-3) var(--eco-space-4);border-top:1px solid var(--eco-border-soft);background:var(--eco-surface-secondary)}
body.ersu-ui-v2 .eco-metric-card{display:grid;gap:8px;min-height:92px;padding:var(--eco-space-4);border:1px solid var(--eco-border);border-radius:var(--eco-radius-md);background:var(--eco-surface);box-shadow:var(--eco-shadow-sm)}
body.ersu-ui-v2 .eco-metric-card__value{font-size:24px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--eco-text)}

/* Badges / chips */
body.ersu-ui-v2 .eco-badge,body.ersu-ui-v2 .eco-chip{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:max-content;max-width:100%;border-radius:var(--eco-radius-pill);font-weight:700;white-space:nowrap}
body.ersu-ui-v2 .eco-badge{min-height:24px;padding:0 8px;border:1px solid var(--eco-border);background:var(--eco-surface-secondary);color:var(--eco-text-secondary);font-size:10px}
body.ersu-ui-v2 .eco-chip{min-height:34px;padding:0 11px;border:1px solid var(--eco-border);background:var(--eco-surface);color:var(--eco-text-secondary);font-size:11px}
body.ersu-ui-v2 .eco-badge--success{border-color:#b7e6c8;background:var(--eco-success-soft);color:var(--eco-success)}
body.ersu-ui-v2 .eco-badge--warning{border-color:#f6d7a7;background:var(--eco-warning-soft);color:var(--eco-warning)}
body.ersu-ui-v2 .eco-badge--danger{border-color:#f0bdc4;background:var(--eco-danger-soft);color:var(--eco-danger)}
body.ersu-ui-v2 .eco-badge--info{border-color:#c7d7fe;background:var(--eco-info-soft);color:var(--eco-info)}

/* Toolbar / search */
body.ersu-ui-v2 .eco-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--eco-space-2);padding:var(--eco-space-2);border:1px solid var(--eco-border);border-radius:var(--eco-radius-md);background:var(--eco-surface);box-shadow:var(--eco-shadow-xs)}
body.ersu-ui-v2 .eco-toolbar__search{flex:1 1 260px;min-width:180px}

/* Tabs */
body.ersu-ui-v2 .eco-tabs{display:flex;align-items:center;gap:4px;overflow:auto;padding:4px;border:1px solid var(--eco-border);border-radius:var(--eco-radius-md);background:var(--eco-surface-secondary);scrollbar-width:none}
body.ersu-ui-v2 .eco-tabs::-webkit-scrollbar{display:none}
body.ersu-ui-v2 .eco-tab{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 11px;border:0;border-radius:10px;background:transparent;color:var(--eco-muted);font:700 11px/1 var(--eco-font);white-space:nowrap;cursor:pointer}
body.ersu-ui-v2 .eco-tab[aria-selected="true"],body.ersu-ui-v2 .eco-tab.is-active{background:var(--eco-surface);color:var(--eco-text);box-shadow:var(--eco-shadow-xs)}
body.ersu-ui-v2 .eco-tab:focus-visible{outline:0;box-shadow:var(--eco-focus-ring)}

/* Alerts */
body.ersu-ui-v2 .eco-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid var(--eco-border);border-radius:var(--eco-radius-sm);background:var(--eco-surface);color:var(--eco-text-secondary);font-size:12px;line-height:1.4}
body.ersu-ui-v2 .eco-alert--success{border-color:#b7e6c8;background:var(--eco-success-soft);color:var(--eco-success)}
body.ersu-ui-v2 .eco-alert--warning{border-color:#f6d7a7;background:var(--eco-warning-soft);color:var(--eco-warning)}
body.ersu-ui-v2 .eco-alert--danger{border-color:#f0bdc4;background:var(--eco-danger-soft);color:var(--eco-danger)}
body.ersu-ui-v2 .eco-alert--info{border-color:#c7d7fe;background:var(--eco-info-soft);color:var(--eco-info)}

/* Empty / loading states */
body.ersu-ui-v2 .eco-empty-state{display:grid;place-items:center;text-align:center;gap:8px;min-height:180px;padding:28px;border:1px dashed var(--eco-border-strong);border-radius:var(--eco-radius-md);background:var(--eco-surface);color:var(--eco-muted)}
body.ersu-ui-v2 .eco-empty-state__title{margin:0;color:var(--eco-text);font-size:15px;font-weight:760}
body.ersu-ui-v2 .eco-empty-state__text{max-width:460px;margin:0;font-size:12px;line-height:1.45}
body.ersu-ui-v2 .eco-skeleton{position:relative;overflow:hidden;border-radius:8px;background:var(--eco-surface-tertiary);color:transparent!important;user-select:none}
body.ersu-ui-v2 .eco-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:ecoSkeleton 1.15s infinite}
@keyframes ecoSkeleton{100%{transform:translateX(100%)}}

/* Touch, focus and mobile density */
@media(max-width:767px){
  body.ersu-ui-v2{
    --eco-header-height:54px;
    --eco-bottom-nav-height:64px;
    --eco-h1-size:24px;
    --eco-h2-size:20px;
  }
  body.ersu-ui-v2 .eco-page{padding:12px;padding-left:max(12px,var(--eco-safe-left));padding-right:max(12px,var(--eco-safe-right));padding-bottom:calc(12px + var(--eco-safe-bottom))}
  body.ersu-ui-v2 .eco-page-header{align-items:stretch;gap:10px}
  body.ersu-ui-v2 .eco-page-header.is-stacked{flex-direction:column}
  body.ersu-ui-v2 .eco-grid-3,body.ersu-ui-v2 .eco-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ersu-ui-v2 .eco-toolbar{align-items:stretch}
  body.ersu-ui-v2 .eco-toolbar__search{flex-basis:100%}
}
@media(max-width:430px){
  body.ersu-ui-v2 .eco-grid-2,body.ersu-ui-v2 .eco-grid-3,body.ersu-ui-v2 .eco-grid-4{grid-template-columns:1fr}
  body.ersu-ui-v2 .eco-card__header,body.ersu-ui-v2 .eco-card__body{padding:12px}
  body.ersu-ui-v2 .eco-page-actions{width:100%}
  body.ersu-ui-v2 .eco-page-actions>.eco-button{flex:1 1 auto}
}

@media(prefers-reduced-motion:reduce){
  body.ersu-ui-v2 *,body.ersu-ui-v2 *::before,body.ersu-ui-v2 *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}