/**
 * (PREGNORF ✅) DMXR4 — Style Guide (Preview + Apps)
 * File: factory/studio/assets/css/dmxr4-style-guide.css
 * Version: 10.4.8
 *
 * Purpose
 *  - Establish a small, stable design system used across:
 *      - Factory preview (visitor/settings)
 *      - Settings demo shell
 *      - DMXReady v4 apps (runtime UI)
 *
 * Notes
 *  - This is intentionally lightweight: tokens + a few “stage” primitives.
 *  - App-specific styles still live with each app/module.
 */

:root{
  /*
   * Token bridge
   * Keep this file “kit-agnostic”: it should not invent colors.
   * The active Design Kit is the source of truth (via --v4-* tokens).
   */
  --dmxr4-ink:var(--v4-ink, #0f172a);
  --dmxr4-muted:var(--v4-muted, #475569);
  --dmxr4-brand-600:var(--v4-brand, #ff2d55);
  --dmxr4-card-bg:var(--v4-card, #ffffff);
  --dmxr4-radius-xl:22px;
  --dmxr4-shadow-lg:0 18px 40px color-mix(in srgb, var(--v4-ink) 45%, transparent);
  --dmxr4-border-soft:1px solid color-mix(in srgb, var(--v4-ink) 12%, transparent);

  /* Typography */
  --dmxr4-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --dmxr4-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --dmxr4-font-size: 16px;
  --dmxr4-line-height: 1.55;
}

/* Stage: a neutral “card canvas” for rendering an app or settings view */
.dmxr4-stage{
  margin-top:8px;
  padding:18px 16px 20px;
  border-radius:var(--dmxr4-radius-xl);
  background:var(--dmxr4-card-bg);
  color:var(--dmxr4-ink);
  font-family: var(--dmxr4-font-sans);
  font-size: var(--dmxr4-font-size);
  line-height: var(--dmxr4-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow:var(--dmxr4-shadow-lg);
}

/* PV2 + iframe embeds provide their own “surface” (device bezel / canvas).
   Use this modifier to prevent a second card container from rendering. */
.dmxr4-stage.dmxr4-stage--bare{
  margin:0;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Basic readable defaults inside a stage */
.dmxr4-stage a{
  color:var(--v4-link, var(--dmxr4-brand-600));
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.dmxr4-stage a:hover{
  color:var(--v4-link-hover, var(--dmxr4-brand-600));
}
.dmxr4-stage :where(h1,h2,h3,h4){ color:var(--dmxr4-ink); }
.dmxr4-stage :where(p,li,td,th,label){ color:var(--dmxr4-ink); }
.dmxr4-stage :where(small){ color:var(--dmxr4-muted); }
.dmxr4-stage :where(input,textarea,select){
  color:var(--dmxr4-ink);
  background:var(--v4-card);
  border:var(--dmxr4-border-soft);
  border-radius:10px;
}

/* Factory preview utility (opt-in) */
.dmxr4-preview-sandbox,
.dmxr4-preview-sandbox *{ box-sizing:border-box; }