/* Shared visual language for authored Glossi product illustrations.
   Keep geometry and product-media grounds in the individual composition. */
@font-face {
  font-family: GlossiIllustrationInter;
  src: url('/illustrations/studio-hero/assets/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --gi-surface: #fff;
  --gi-backdrop: linear-gradient(125deg, #e4dbd2 0%, #eeeae6 44%, #d5dfe5 100%);
  --gi-surface-subtle: #f7f7f8;
  --gi-surface-inset: #f0f0f2;
  --gi-text: #24262b;
  --gi-muted: #686b73;
  --gi-line: #e4e5e8;
  --gi-radius: 12px;
  --gi-control-radius: 6px;
  --gi-track-height: 3px;
  --gi-thumb-size: 10px;
  --gi-accent: #688ca8;
  --gi-selected: #e8eff4;
  --gi-shadow: 0 1px 2px #18181b05, 0 12px 32px -12px #18181b24;
  --gi-shadow-flat: none;
  --gi-shadow-panel: 0 1px 2px #18181b04, 0 6px 16px -8px #18181b18;
  --gi-shadow-focus: 0 2px 4px #18181b08, 0 18px 40px -14px #18181b30;
  --gi-font: GlossiIllustrationInter, Inter, sans-serif;
}
/* These are the actual Stageshow token names. No geometry or image filters. */
.ss-stage {
  --ss-canvas: var(--gi-surface-subtle);
  --ss-surface: var(--gi-surface);
  --ss-chrome: var(--gi-surface);
  --ss-raised: var(--gi-surface);
  --ss-well: var(--gi-surface-inset);
  --ss-fill: var(--gi-surface-inset);
  --ss-ink-1: color-mix(in srgb, var(--gi-text) 4%, transparent);
  --ss-ink-2: color-mix(in srgb, var(--gi-text) 6%, transparent);
  --ss-ink-3: color-mix(in srgb, var(--gi-text) 9%, transparent);
  --ss-ink-4: color-mix(in srgb, var(--gi-text) 13%, transparent);
  --ss-ink-5: color-mix(in srgb, var(--gi-text) 18%, transparent);
  --ss-text-strong: var(--gi-text);
  --ss-text: var(--gi-muted);
  --ss-text-faint: var(--gi-muted);
  --ss-icon: var(--gi-muted);
  --ss-icon-faint: color-mix(in srgb, var(--gi-muted) 45%, var(--gi-surface));
  --ss-line: var(--gi-line);
  --ss-line-faint: color-mix(in srgb, var(--gi-line) 55%, transparent);
  --ss-accent: var(--gi-accent);
  --ss-accent-2: var(--gi-accent);
  --ss-accent-soft: var(--gi-selected);
  --ss-accent-text: var(--gi-text);
  --ss-font: var(--gi-font);
  --ss-radius-sm: var(--gi-control-radius);
  --ss-radius-md: var(--gi-control-radius);
  --ss-radius-lg: var(--gi-radius);
  --ss-radius-window: var(--gi-radius);
  --ss-shadow-card: var(--gi-shadow-flat);
  --ss-shadow-window: var(--gi-shadow-panel);
  --ss-shadow-hero: var(--gi-shadow);
  --ss-shadow-ground: var(--gi-shadow-flat);
  --ss-shadow-satellite: var(--gi-shadow-focus);
  --ss-shadow-float: var(--gi-shadow-focus);
  --ss-shadow-lift: var(--gi-shadow-focus);
}
/* Optional roles. Add them to real UI surfaces, never to product images. */
.gi-panel {
  background: var(--gi-surface);
  color: var(--gi-text);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius);
  box-shadow: var(--gi-shadow-panel);
  font-family: var(--gi-font);
}
.gi-panel[data-depth='flat'] { box-shadow: var(--gi-shadow-flat); }
.gi-panel[data-depth='focus'] { box-shadow: var(--gi-shadow-focus); }
.gi-input {
  background: var(--gi-surface-inset);
  color: var(--gi-text);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-control-radius);
  font-family: var(--gi-font);
}
.gi-selected { background: var(--gi-selected); color: var(--gi-text); }
.gi-muted { color: var(--gi-muted); }

/* The older SVG feature fragments use the same light surfaces and rule hierarchy. */
.feature-illustration,.mini-proof {
 --fi-radius:var(--gi-control-radius);
 --fi-line:var(--gi-muted);
 --fi-line-strong:var(--gi-text);
 --fi-line-faint:var(--gi-line);
 --fi-surface:var(--gi-surface);
 --fi-surface-edge:var(--gi-line);
 --fi-control:var(--gi-surface-inset);
 --fi-control-edge:var(--gi-line);
 --fi-skeleton:var(--gi-line);
 --fi-skeleton-soft:var(--gi-surface-inset);
 --fi-connector:var(--gi-muted);
}

/* Caption and selection text keep their roles on inset illustration surfaces. */
.sfs-agent-light .sfs-footage > span { color: var(--launch-muted); }
.ds-study .ds-current,
.ds-study .ds-saved-view > span:last-child { color: var(--launch-info-text); }