/*
 * DESIGN-1 design tokens extracted from the first uploaded plugin:
 * localpdf-edit-tools v3.3.70 / Add Page Numbers foundation.
 *
 * This file intentionally contains semantic tokens only. DESIGN-2/3/4 will
 * remap the Start, Workspace, and Export templates to these tokens without
 * changing the shared upload/render/export behavior.
 */
.ept-bench {
  --ept-design-stage: "DESIGN-1 first-plugin-token-extract";
  --ept-design-source-plugin: "localpdf-edit-tools";
  --ept-design-source-version: "3.3.70-ai5";
  --ept-design-source-tool: "add-page-numbers";

  /* Approved color palette from the first plugin foundation. */
  --ept-blue: #2563eb;
  --ept-blue-dark: #1d4ed8;
  --ept-blue-strong: #3b82f6;
  --ept-blue-soft: #eff6ff;
  --ept-cyan-accent: #67e8f9;
  --ept-green: #22c55e;
  --ept-green-soft: #f0fdf4;
  --ept-text: #0f172a;
  --ept-muted: #64748b;
  --ept-muted-strong: #475569;
  --ept-surface: rgba(255, 255, 255, 0.96);
  --ept-surface-solid: #ffffff;
  --ept-surface-soft: #f8fbff;
  --ept-surface-blue: #eff6ff;
  --ept-bg: #f6f7fb;
  --ept-border: rgba(191, 219, 254, 0.92);
  --ept-border-blue: rgba(191, 219, 254, 0.72);
  --ept-border-soft: rgba(148, 163, 184, 0.22);
  --ept-border-strong: rgba(147, 197, 253, 0.78);

  /* Existing semantic aliases used by the current shared CSS. */
  --ept-primary: var(--ept-blue);
  --ept-primary-dark: var(--ept-blue-dark);
  --ept-primary-soft: var(--ept-blue-soft);
  --ept-info-bg: var(--ept-blue-soft);
  --ept-info-border: #bfdbfe;
  --ept-info-text: var(--ept-blue-dark);
  --ept-success-bg: #ecfdf5;
  --ept-success-border: #a7f3d0;
  --ept-success-text: #047857;
  --ept-warning-bg: #fffbeb;
  --ept-warning-border: #fde68a;
  --ept-warning-text: #92400e;
  --ept-error-bg: #fef2f2;
  --ept-error-border: #fecaca;
  --ept-error-text: #b91c1c;

  /* Radius scale from the first plugin. */
  --ept-radius-app: 30px;
  --ept-radius-dropzone: 28px;
  --ept-radius-workspace: 28px;
  --ept-radius-card-lg: 26px;
  --ept-radius-panel: 24px;
  --ept-radius-card: 22px;
  --ept-radius: 18px;
  --ept-radius-md: 14px;
  --ept-radius-sm: 12px;
  --ept-radius-button: 17px;
  --ept-radius-button-lg: 18px;
  --ept-radius-pill: 999px;
  --ept-radius-lg: var(--ept-radius-app);

  /* Shadows from the first plugin. */
  --ept-shadow: 0 28px 90px rgba(15, 23, 42, 0.07);
  --ept-shadow-soft: 0 14px 34px rgba(15, 23, 42, 0.055);
  --ept-shadow-card: 0 18px 58px rgba(15, 23, 42, 0.055);
  --ept-shadow-workspace: 0 32px 100px rgba(15, 23, 42, 0.10), 0 1px 0 rgba(255, 255, 255, 0.96) inset;
  --ept-shadow-button: 0 18px 42px rgba(37, 99, 235, 0.30);
  --ept-shadow-button-hover: 0 20px 48px rgba(37, 99, 235, 0.35);
  --ept-shadow-pdf: 0 24px 64px rgba(15, 23, 42, 0.12);
  --ept-focus: 0 0 0 3px rgba(37, 99, 235, 0.18);

  /* Width and layout contract. */
  --ept-width-start: 1120px;
  --ept-width-workspace: 1500px;
  --ept-width-export: 1500px;
  --ept-shell-margin-y: clamp(18px, 2.4vw, 34px);
  --ept-app-padding: clamp(22px, 3.2vw, 42px);
  --ept-workspace-padding: 24px;
  --ept-workspace-gap: 20px;
  --ept-workspace-left-min: 620px;
  --ept-workspace-panel-min: 430px;

  /* Start page metrics. */
  --ept-start-min-height: clamp(400px, 42vw, 560px);
  --ept-start-padding-y: clamp(44px, 6vw, 82px);
  --ept-start-padding-x: clamp(20px, 4vw, 52px);
  --ept-start-hero-icon: 82px;
  --ept-start-hero-radius: 24px;
  --ept-start-hero-orbit: 132px;
  --ept-start-title-size: clamp(28px, 3vw, 42px);
  --ept-start-title-tracking: -0.06em;
  --ept-start-copy-size: clamp(14px, 1.3vw, 17px);
  --ept-start-trust-width: 720px;
  --ept-start-trust-height: 76px;

  /* Workspace metrics. */
  --ept-workspace-topbar-padding: 16px;
  --ept-workspace-icon-size: 58px;
  --ept-workspace-preview-min-height: clamp(438px, 44vw, 620px);
  --ept-workspace-preview-page-max: 390px;
  --ept-page-chip-size: 36px;
  --ept-preview-nav-size: 38px;

  /* Export/result metrics. */
  --ept-export-radius: 22px;
  --ept-export-progress-height: 10px;
  --ept-summary-card-min-height: 88px;
  --ept-summary-card-padding: 16px 18px;
  --ept-summary-grid-min: 150px;

  /* Typography contract from the first plugin. */
  --ept-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ept-title-weight: 950;
  --ept-title-tracking: -0.055em;
  --ept-body-weight: 650;
  --ept-label-weight: 950;
  --ept-button-weight: 900;

  /* Approved shared gradients. */
  --ept-gradient-app: radial-gradient(circle at 50% -5%, rgba(37, 99, 235, 0.08), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%);
  --ept-gradient-start: radial-gradient(circle at 50% 18%, rgba(37, 99, 235, 0.12), transparent 30%), radial-gradient(circle at 50% 74%, rgba(34, 197, 94, 0.055), transparent 38%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  --ept-gradient-button: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  --ept-gradient-preview: radial-gradient(circle at 50% 18%, rgba(37, 99, 235, 0.08), transparent 32%), linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
  --ept-gradient-progress: linear-gradient(90deg, #2563eb, #67e8f9);
}

/* Token audit preview classes used only by the shared debug/design bench. */
.ept-design-token-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.ept-design-token {
  min-height: 76px;
  border: 1px solid var(--ept-border-blue);
  border-radius: var(--ept-radius);
  background: rgba(255,255,255,.9);
  box-shadow: var(--ept-shadow-soft);
  padding: 12px;
}

.ept-design-token strong,
.ept-design-token span {
  display: block;
}

.ept-design-token strong {
  color: var(--ept-text) !important;
  font-size: 12.5px;
  font-weight: 950;
}

.ept-design-token span {
  color: var(--ept-muted) !important;
  font-size: 11.5px;
  margin-top: 4px;
}

.ept-design-token__swatch {
  width: 100%;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .2);
  margin-bottom: 8px;
}

.ept-design-token__swatch--primary { background: var(--ept-primary); }
.ept-design-token__swatch--blue-soft { background: var(--ept-primary-soft); }
.ept-design-token__swatch--surface { background: linear-gradient(180deg, #fff, #f8fbff); }
.ept-design-token__swatch--success { background: var(--ept-success-bg); }
.ept-design-token__swatch--progress { background: var(--ept-gradient-progress); }
.ept-design-token__swatch--shadow { background: #fff; box-shadow: var(--ept-shadow-button); }