/*
 * AdEditors Unified Design System — Stage DS-1 (Foundation)
 * Platform-neutral visual foundation used by Shopify today and intended to be
 * mirrored by Salla / Web / Mobile clients later.
 *
 * This layer intentionally contains foundations + primitive treatments only.
 * Feature/page-specific component composition belongs to DS-2/DS-3.
 */

:root {
  /* Brand */
  --adeds-brand-50:#ECFDF7;
  --adeds-brand-100:#D7F7EB;
  --adeds-brand-200:#ADEED7;
  --adeds-brand-300:#75DEBD;
  --adeds-brand-400:#36C79D;
  --adeds-brand-500:#00A075;
  --adeds-brand-600:#008765;
  --adeds-brand-700:#006D53;
  --adeds-brand-800:#075745;
  --adeds-brand-900:#08483B;
  --adeds-navy-950:#071525;

  /* Neutrals */
  --adeds-gray-25:#FCFDFD;
  --adeds-gray-50:#F8FAFC;
  --adeds-gray-100:#F1F5F9;
  --adeds-gray-200:#E6EBF1;
  --adeds-gray-300:#D6DEE8;
  --adeds-gray-400:#98A2B3;
  --adeds-gray-500:#667085;
  --adeds-gray-600:#475467;
  --adeds-gray-700:#344054;
  --adeds-gray-800:#1D2939;
  --adeds-gray-900:#172033;

  /* Semantic */
  --adeds-info:#2563EB;
  --adeds-info-soft:#EFF6FF;
  --adeds-success:#039855;
  --adeds-success-soft:#ECFDF3;
  --adeds-warning:#F79009;
  --adeds-warning-soft:#FFF7E8;
  --adeds-danger:#D92D20;
  --adeds-danger-soft:#FEF3F2;
  --adeds-yellow:#EAAA08;
  --adeds-yellow-soft:#FEFBE8;
  --adeds-teal:#0E9384;
  --adeds-teal-soft:#F0FDF9;

  /* Score semantics: <55 red | 55-69 orange | 70-79 yellow | 80-89 teal | 90+ green */
  --adeds-score-critical:#D92D20;
  --adeds-score-critical-soft:#FEF3F2;
  --adeds-score-warning:#F79009;
  --adeds-score-warning-soft:#FFF7E8;
  --adeds-score-watch:#EAAA08;
  --adeds-score-watch-soft:#FEFBE8;
  --adeds-score-good:#0E9384;
  --adeds-score-good-soft:#F0FDF9;
  --adeds-score-excellent:#039855;
  --adeds-score-excellent-soft:#ECFDF3;

  /* Typography */
  --adeds-font:"Cairo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --adeds-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --adeds-fs-2xs:10px;
  --adeds-fs-xs:11px;
  --adeds-fs-sm:12px;
  --adeds-fs-md:14px;
  --adeds-fs-lg:16px;
  --adeds-fs-xl:20px;
  --adeds-fs-2xl:24px;
  --adeds-fs-3xl:30px;
  --adeds-lh-tight:1.2;
  --adeds-lh-normal:1.5;
  --adeds-lh-relaxed:1.7;
  --adeds-fw-medium:500;
  --adeds-fw-semibold:600;
  --adeds-fw-bold:700;
  --adeds-fw-extrabold:800;

  /* 4pt spacing system */
  --adeds-space-1:4px;
  --adeds-space-2:8px;
  --adeds-space-3:12px;
  --adeds-space-4:16px;
  --adeds-space-5:20px;
  --adeds-space-6:24px;
  --adeds-space-8:32px;
  --adeds-space-10:40px;
  --adeds-space-12:48px;

  /* Shape */
  --adeds-radius-xs:8px;
  --adeds-radius-sm:10px;
  --adeds-radius-md:14px;
  --adeds-radius-lg:18px;
  --adeds-radius-xl:22px;
  --adeds-radius-pill:999px;

  /* Elevation */
  --adeds-shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --adeds-shadow-sm:0 4px 14px rgba(16,24,40,.055);
  --adeds-shadow-md:0 10px 28px rgba(16,24,40,.075);
  --adeds-shadow-lg:0 18px 48px rgba(16,24,40,.10);
  --adeds-shadow-brand:0 10px 24px rgba(0,160,117,.16);

  /* Motion */
  --adeds-ease:cubic-bezier(.2,.8,.2,1);
  --adeds-duration-fast:140ms;
  --adeds-duration:180ms;

  /* Layout */
  --adeds-content-max:1780px;
  --adeds-control-h:40px;
  --adeds-control-h-lg:44px;
}

/* Map the existing Shopify app variables to the unified foundation. */
.adpai-shopify-shell,
.adpai-shopify-app,
.adpai-connect-page {
  --adpai-font:var(--adeds-font);
  --adpai-primary:var(--adeds-brand-500);
  --adpai-primary-hover:var(--adeds-brand-600);
  --adpai-primary-strong:var(--adeds-brand-700);
  --adpai-primary-soft:var(--adeds-brand-50);
  --adpai-green:var(--adeds-brand-500);
  --adpai-green-dark:var(--adeds-brand-600);
  --adpai-bg:var(--adeds-gray-50);
  --adpai-card:#fff;
  --adpai-text:var(--adeds-gray-900);
  --adpai-muted:var(--adeds-gray-500);
  --adpai-subtle:var(--adeds-gray-400);
  --adpai-border:var(--adeds-gray-200);
  --adpai-border-strong:var(--adeds-gray-300);
  --adpai-info:var(--adeds-info);
  --adpai-info-soft:var(--adeds-info-soft);
  --adpai-success:var(--adeds-success);
  --adpai-success-soft:var(--adeds-success-soft);
  --adpai-warning:var(--adeds-warning);
  --adpai-warning-soft:var(--adeds-warning-soft);
  --adpai-danger:var(--adeds-danger);
  --adpai-danger-soft:var(--adeds-danger-soft);
  --adpai-focus:var(--adeds-brand-500);
  --adpai-shadow-xs:var(--adeds-shadow-xs);
  --adpai-shadow-sm:var(--adeds-shadow-sm);
  --adpai-shadow-md:var(--adeds-shadow-md);
  --adpai-radius-sm:var(--adeds-radius-sm);
  --adpai-radius-md:var(--adeds-radius-md);
  --adpai-radius-lg:var(--adeds-radius-lg);
  font-family:var(--adeds-font)!important;
  color:var(--adeds-gray-900);
}

html,body,
.adpai-shopify-app,
.adpai-connect-page,
.adpai-shopify-shell,
button,input,select,textarea {
  font-family:var(--adeds-font)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.adpai-shopify-shell {
  background:
    radial-gradient(circle at 8% 0%,rgba(0,160,117,.055),transparent 28rem),
    linear-gradient(180deg,#FBFDFD 0%,#F5F8FA 100%);
  color:var(--adeds-gray-900);
}

/* Type rhythm */
.adpai-shopify-app h1,
.adpai-shopify-app h2,
.adpai-shopify-app h3,
.adpai-shopify-app h4,
.adpai-connect-page h1,
.adpai-connect-page h2 {
  color:var(--adeds-gray-900);
  line-height:var(--adeds-lh-tight);
  letter-spacing:-.018em;
}
.adpai-shopify-app p,
.adpai-connect-page p { line-height:var(--adeds-lh-relaxed); }

/* The compact account-link hero sits on the logo's native navy canvas. */
.adpai-connect-page .adpai-connect-hero h1 { color:#fff; }

/* Global focus/accessibility */
.adpai-shopify-app :where(button,a,input,select,textarea):focus-visible,
.adpai-connect-page :where(button,a,input,select,textarea):focus-visible {
  outline:0!important;
  box-shadow:0 0 0 3px rgba(0,160,117,.16)!important;
  border-color:var(--adeds-brand-400)!important;
}

/* App canvas + shell elevation. */
.adpai-app-header {
  background:rgba(255,255,255,.97)!important;
  border-color:rgba(214,222,232,.84)!important;
  box-shadow:0 1px 0 rgba(16,24,40,.025),0 12px 34px rgba(16,24,40,.045)!important;
}
.adpai-app-main {
  width:100%;
  max-width:var(--adeds-content-max)!important;
  margin-inline:auto;
}
.adpai-app-nav {
  background:rgba(255,255,255,.98)!important;
  border-color:var(--adeds-gray-200)!important;
}
.adpai-app-nav button,
.adpai-level-tabs button {
  transition:background var(--adeds-duration) var(--adeds-ease),color var(--adeds-duration) var(--adeds-ease),box-shadow var(--adeds-duration) var(--adeds-ease),transform var(--adeds-duration-fast) var(--adeds-ease);
}
.adpai-app-nav button.active,
.adpai-level-tabs button.active {
  background:var(--adeds-brand-50)!important;
  color:var(--adeds-brand-700)!important;
  box-shadow:inset 0 0 0 1px var(--adeds-brand-200)!important;
}

/* Primitive surfaces: consistent commercial SaaS depth. */
:where(.adpai-card,.surface-card,.adpai-kpi,.adpai-history-card,.adpai-commerce-summary,.adpai-product-insights>div,.adpai-product-history,.adpai-engine-panel,.adpai-task,.adpai-wizard-section,.adpai-price-card) {
  border-color:var(--adeds-gray-200)!important;
  background:#fff;
  box-shadow:var(--adeds-shadow-sm);
}
:where(.adpai-card,.surface-card,.adpai-history-card,.adpai-commerce-summary,.adpai-product-insights>div,.adpai-product-history,.adpai-engine-panel,.adpai-task,.adpai-wizard-section) {
  border-radius:var(--adeds-radius-md)!important;
}
:where(.adpai-card,.surface-card,.adpai-kpi,.adpai-history-card,.adpai-product-insights>div,.adpai-product-history,.adpai-engine-panel,.adpai-task) {
  transition:box-shadow var(--adeds-duration) var(--adeds-ease),border-color var(--adeds-duration) var(--adeds-ease),transform var(--adeds-duration) var(--adeds-ease);
}
:where(.adpai-card,.surface-card,.adpai-kpi,.adpai-history-card,.adpai-product-insights>div,.adpai-product-history,.adpai-engine-panel,.adpai-task):hover {
  border-color:#D6E6E0!important;
  box-shadow:var(--adeds-shadow-md);
}

/* KPI primitive: centred by default and visually usable across clients. */
.adpai-kpi {
  min-height:118px!important;
  padding:var(--adeds-space-4)!important;
  border-radius:var(--adeds-radius-lg)!important;
  text-align:center;
  align-items:center!important;
  justify-content:center!important;
  gap:var(--adeds-space-2)!important;
}
.adpai-kpi:before {
  width:4px!important;
  background:linear-gradient(180deg,var(--adeds-brand-500),var(--adeds-brand-300))!important;
}
.adpai-kpi strong {
  font-size:clamp(22px,2vw,28px)!important;
  font-weight:var(--adeds-fw-extrabold)!important;
  font-variant-numeric:tabular-nums;
}
.adpai-kpi span,.adpai-kpi small,.adpai-kpi em { text-align:center!important; }

/* Buttons / controls */
.adpai-button,
.adpai-primary,
.adpai-connect-form button {
  min-height:var(--adeds-control-h)!important;
  border-radius:var(--adeds-radius-sm)!important;
  font-weight:var(--adeds-fw-extrabold)!important;
  transition:transform var(--adeds-duration-fast) var(--adeds-ease),box-shadow var(--adeds-duration) var(--adeds-ease),background var(--adeds-duration) var(--adeds-ease),border-color var(--adeds-duration) var(--adeds-ease)!important;
}
.adpai-button.primary,.adpai-primary {
  background:linear-gradient(180deg,#09AA7F 0%,var(--adeds-brand-500) 100%)!important;
  border-color:var(--adeds-brand-500)!important;
  box-shadow:0 5px 14px rgba(0,160,117,.16)!important;
}
.adpai-button.primary:hover,.adpai-primary:hover {
  background:linear-gradient(180deg,var(--adeds-brand-500) 0%,var(--adeds-brand-600) 100%)!important;
  box-shadow:var(--adeds-shadow-brand)!important;
  transform:translateY(-1px);
}
:where(.adpai-filter-bar input,.adpai-filter-bar select,.field input,.field select,.adpai-table-toolbar input,.adpai-table-toolbar select,.adpai-smart-table-toolbar input,.adpai-smart-table-toolbar select,.adpai-connect-form input,.adpai-connect-form select) {
  min-height:var(--adeds-control-h)!important;
  border-color:var(--adeds-gray-300)!important;
  border-radius:var(--adeds-radius-sm)!important;
  background:var(--adeds-gray-25)!important;
  color:var(--adeds-gray-800)!important;
}

/* Semantic statuses */
.adpai-badge,.state-badge { border-radius:var(--adeds-radius-pill)!important; }
.adpai-badge.success,.state-available,.state-success { background:var(--adeds-success-soft)!important;color:var(--adeds-success)!important;border-color:#C7EEDB!important; }
.adpai-badge.danger,.state-unavailable,.state-error { background:var(--adeds-danger-soft)!important;color:var(--adeds-danger)!important;border-color:#F9D4D0!important; }
.state-upgrade_required,.state-quota_exhausted,.state-temporarily_unavailable,.state-stale,.state-degraded { background:var(--adeds-warning-soft)!important;color:#B54708!important; }

/* Score variables are canonical and can be consumed by every future client. */
.adpai-score-critical { --score-color:var(--adeds-score-critical);--score-soft:var(--adeds-score-critical-soft);--score-border:#F7C9C5; }
.adpai-score-warning  { --score-color:var(--adeds-score-warning); --score-soft:var(--adeds-score-warning-soft); --score-border:#F8D7A5; }
.adpai-score-watch    { --score-color:var(--adeds-score-watch);   --score-soft:var(--adeds-score-watch-soft);   --score-border:#F3E4A5; }
.adpai-score-good     { --score-color:var(--adeds-score-good);    --score-soft:var(--adeds-score-good-soft);    --score-border:#BFE8DF; }
.adpai-score-excellent{ --score-color:var(--adeds-score-excellent);--score-soft:var(--adeds-score-excellent-soft);--score-border:#BFE8D0; }

/* Tables: foundation only — stronger frame, density and sticky header. */
.adpai-table-wrap {
  border-color:var(--adeds-gray-200)!important;
  border-radius:var(--adeds-radius-md)!important;
  box-shadow:var(--adeds-shadow-xs);
}
.adpai-data-table { font-variant-numeric:tabular-nums; }
.adpai-data-table th {
  min-height:44px;
  padding-block:11px!important;
  background:#F7FAFC!important;
  color:var(--adeds-gray-600)!important;
  font-size:var(--adeds-fs-xs)!important;
  font-weight:var(--adeds-fw-extrabold)!important;
  letter-spacing:.01em;
  border-bottom-color:var(--adeds-gray-200)!important;
}
.adpai-data-table td {
  padding-block:11px!important;
  color:var(--adeds-gray-700);
  border-bottom-color:#EEF2F6!important;
}
.adpai-data-table tbody tr:hover { background:#F7FCFA!important; }
.adpai-smart-table-toolbar {
  border-color:var(--adeds-gray-200)!important;
  border-radius:var(--adeds-radius-md)!important;
  box-shadow:var(--adeds-shadow-xs)!important;
}

/* Empty/warning primitives */
.adpai-empty {
  min-height:96px;
  display:grid;
  place-items:center;
  border-radius:var(--adeds-radius-md)!important;
  background:linear-gradient(180deg,#FCFDFE,#F8FAFC)!important;
  color:var(--adeds-gray-500)!important;
}
.adpai-warning {
  border-radius:var(--adeds-radius-md)!important;
  background:var(--adeds-warning-soft)!important;
}

/* Marketing-grade login/linking surface without changing authentication behavior. */
.adpai-connect-wrap {
  background:
    radial-gradient(circle at 15% 10%,rgba(0,160,117,.13),transparent 26rem),
    radial-gradient(circle at 90% 80%,rgba(37,99,235,.07),transparent 30rem),
    linear-gradient(145deg,#F7FCFA 0%,#F7F9FC 65%,#F3F7FA 100%)!important;
}
.adpai-connect-card {
  border-radius:var(--adeds-radius-xl)!important;
  border-color:rgba(214,222,232,.92)!important;
  box-shadow:var(--adeds-shadow-lg)!important;
}
.adpai-connect-logo img { filter:drop-shadow(0 3px 8px rgba(16,24,40,.06)); }

/* Responsive foundation */
@media (max-width:1100px) {
  .adpai-kpi-grid { grid-template-columns:repeat(4,minmax(140px,1fr))!important; }
  .adpai-app-header { grid-template-columns:minmax(220px,1fr) auto!important; }
  .adpai-header-actions { grid-column:1/-1;justify-content:flex-end; }
}
@media (max-width:760px) {
  :root { --adeds-space-6:20px;--adeds-space-8:26px; }
  .adpai-app-main { padding:var(--adeds-space-3)!important; }
  .adpai-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--adeds-space-2)!important; }
  .adpai-kpi { min-height:102px!important;padding:var(--adeds-space-3)!important; }
  .adpai-app-header { padding:12px!important; }
}
@media (prefers-reduced-motion:reduce) {
  .adpai-shopify-app *, .adpai-connect-page * { scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important; }
}