/*
 * Image Tools design tokens (05-ux-baseline.md §2.6, 06-DESIGN-DECISIONS.md).
 * Page-scoped: everything hangs off body.imagestack-page so the rest of the
 * site is untouched. No cascade layers on purpose: /index1.css is unlayered,
 * and unlayered rules beat layered ones regardless of specificity.
 *
 * Rules for every tool author:
 *  - Colours, radii, spacing, type, elevation and motion come from here. No raw hex in tool CSS.
 *  - Four radii plus pill. No card inside a card: group with spacing and a --border divider.
 *  - Uppercase micro type only for rail group labels and compare badges.
 */

html:has(body.imagestack-page) {
  background: #070E14;
}

/* Keep focused controls clear of the fixed phone action bar (WCAG 2.4.11). */
@media (max-width: 959px) {
  html:has(body.imagestack-page) { scroll-padding-bottom: 96px; }
}

body.imagestack-page {
  /* ---- Palette ---- */
  --bg: #070E14;
  --surface-1: #0C161E;
  --surface-2: #111E28;
  --surface-3: #182834;
  --stage: #0A1218;
  --checker-a: #16212A;
  --checker-b: #1E2B35;
  --border: #1F2F3B;
  --border-control: #587083;
  --text: #EAF2F8;
  --text-2: #B4C4D1;
  --text-3: #8A9DAD;
  --text-disabled: #5B6E7D;
  --accent: #5EEAD4;
  --accent-hover: #2DD4BF;
  --accent-tint: rgba(94, 234, 212, .12);
  --accent-wash: rgba(94, 234, 212, .06);
  --on-accent: #04211D;
  --brand-gradient: linear-gradient(135deg, #8DF6C7, #6BC7FF);
  --info: #7DD3FC;
  --success: #86EFAC;
  --warning: #FCD34D;
  --danger: #FCA5A5;
  --danger-line: rgba(252, 165, 165, .35);
  --danger-fill: #B91C1C;
  --pro: #C4B5FD;
  --pro-fill: #6D28D9;
  --pro-fill-hover: #7C3AED;
  --mask: rgba(94, 234, 212, .45);
  --mask-edge: #5EEAD4;
  --scrim: rgba(4, 8, 12, .72);
  --stage-dim: rgba(7, 14, 20, .55);
  --badge-ground: rgba(7, 14, 20, .7);

  /* ---- Type ---- */
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --fs-display: 1.75rem;   --lh-display: 2.125rem;   /* 28/34 */
  --fs-title: 1.125rem;    --lh-title: 1.625rem;     /* 18/26 */
  --fs-body: .9375rem;     --lh-body: 1.375rem;      /* 15/22 */
  --fs-label: .8125rem;    --lh-label: 1.125rem;     /* 13/18 */
  --fs-meta: .75rem;       --lh-meta: 1rem;          /* 12/16 */
  --fs-micro: .6875rem;    --lh-micro: .875rem;      /* 11/14 */

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px;

  /* ---- Radii: four values plus pill, nothing else ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --e-0: none;
  --e-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .4);
  --e-2: 0 8px 24px rgba(0, 0, 0, .45);
  --e-3: 0 24px 64px rgba(0, 0, 0, .6);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 320ms;
  --t-shimmer: 1.6s;

  /* ---- Layout ---- */
  --it-nav-h: 117px;          /* measured at runtime by main.js (promo strip + nav) */
  --rail-w: 232px;
  --rail-w-icon: 64px;
  --inspector-w: 360px;
  --actionbar-h: 72px;
  --target: 44px;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ---- z-index scale ---- */
  --z-stage-ui: 5;
  --z-sticky: 50;
  --z-actionbar: 900;
  --z-popover: 1100;
  --z-toast: 1200;

  color-scheme: dark;
  background: var(--bg);
}

/* App typography lives on the app roots, not <body>, so the shared nav and
   footer keep the site's own type. .it-layer = dialogs, sheets, toasts. */
body.imagestack-page .it-app,
body.imagestack-page .it-layer {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767px) {
  body.imagestack-page {
    --fs-display: 1.5rem;
    --lh-display: 1.875rem; /* 24/30 */
  }
}

/* The site's animated aurora (index1.css) is decoration a workspace doesn't need,
   and it costs GPU on every frame. */
body.imagestack-page::before,
body.imagestack-page::after {
  content: none !important;
  animation: none !important;
  filter: none !important;
}

/* ---- Base ---- */
body.imagestack-page .it-app,
body.imagestack-page .it-app *,
body.imagestack-page .it-layer,
body.imagestack-page .it-layer * {
  box-sizing: border-box;
}

body.imagestack-page [hidden] { display: none !important; }

body.imagestack-page .it-app :focus { outline: none; }
body.imagestack-page .it-app :focus-visible,
body.imagestack-page .it-layer :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body.imagestack-page .it-app ::selection { background: rgba(94, 234, 212, .3); color: var(--text); }

.it-visually-hidden,
body.imagestack-page .visually-hidden {
  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;
}

.it-num { font-variant-numeric: tabular-nums; }

/* Reduced motion: no wipe, no shimmer, no slide. Cross-fades stay short. */
@media (prefers-reduced-motion: reduce) {
  body.imagestack-page {
    --t-fast: 1ms;
    --t-med: 1ms;
    --t-slow: 120ms;
  }
  html:has(body.imagestack-page) { scroll-behavior: auto; }
  body.imagestack-page *,
  body.imagestack-page *::before,
  body.imagestack-page *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}