/* pico.css : the Vibe XR workshop theme, in the picoxr.com brand.
 *
 * Structure follows the PICO Spatial SDK (dark glass surfaces, one `interaction` accent, 32 dp window
 * radius, 56 dp targets). Values come from picoxr.com/global where the site has them, tagged
 * [SOURCE <selector>]; the rest are [DERIVED] with a reason. The SDK's own ColorScheme roles are
 * adaptive at runtime, so the web page uses these fixed stand-ins.
 */

/* Fonts. picoxr.com sets headlines in "PICO Regular" (PICO-Sans-VFS.ttf, licensed to PICO, so a web
 * page must NOT embed it) and UI copy in Inter. Figtree is the closest Google Font to PICO Sans
 * (compared side by side 2026-09-24); Inter is PICO's own UI face [SOURCE body font-family]. */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

/* Values re-themed 2026-09-24 to the real picoxr.com/global brand (HTML + 7 stylesheets fetched,
 * computed styles read in headless Chrome). Tags: [SOURCE sel] seen in PICO's CSS with the selector
 * (hashed class suffix trimmed); [DERIVED] our choice + why; [PICO-SDK] number from the Spatial SDK docs.
 * This kit keeps the site's DARK register (hero video, game-art cards, footer); the academy kit at
 * projects/pico-webspatial-academy/theme/ also carries the light register. */
:root {
  /* Surfaces. */
  --pico-bg:        #000000;                    /* [SOURCE] #000 in main.css + .footer-container rgba(0,0,0,.92); hero letterbox is black */
  --pico-surface:   rgba(35, 37, 38, 0.72);     /* [SOURCE .media-modal-container #232526] at glass alpha; hex twin #232526 */
  --pico-surface-2: rgba(58, 60, 62, 0.80);     /* [DERIVED] one step up from #232526 for raised cards and chips */

  /* Text. */
  --pico-ink:       #ffffff;                    /* [SOURCE hero title computed rgb(255,255,255)] 21:1 on bg */
  --pico-ink-dim:   #b3b3b3;                    /* [SOURCE card .desc rgba(255,255,255,.7)] flattened on black = #b3b3b3, 9.7:1 */

  /* Brand + semantic. */
  --pico-accent:    #7458ff;                    /* [DERIVED] PICO violet #4200ff lifted: this kit uses the accent as TEXT, and raw #4200ff is 2.6:1 on black. #7458ff is 4.6:1 on black and white-on-it is 4.6:1 */
  --pico-accent-fill: #4200ff;                  /* [SOURCE .button-container background] the Buy Now pill; white on it is 7.9:1 */
  --pico-accent-2:  #3d8bff;                    /* [SOURCE .switch-button:checked+label] PICO blue, 6.2:1 on black */
  --pico-glow:      #a393ff;                    /* [DERIVED] light tint of #4200ff for rims, focus rings and emissive 3D */
  --pico-danger:    #ff4d4f;                    /* [SOURCE .field-error / .field-input--error] */
  --pico-ok:        #b8f000;                    /* [DERIVED] Motion Tracker strap lime from the product shot; the site has no success colour */
  --pico-warn:      #ffb020;                    /* [DERIVED] amber; the site has no warning colour */
  --pico-rule:      rgba(255, 255, 255, 0.20);  /* [SOURCE .video-switch-area .side-line hsla(0,0%,100%,.2)] */

  /* Type. */
  --pico-font-display: "Figtree", "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --pico-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --pico-font-mono:    "JetBrains Mono", Monaco, Menlo, ui-monospace, Consolas, monospace;

  /* Shape and size. */
  --pico-radius:    16px;   /* [SOURCE .wrapper / .video-container border-radius:16px] also the IC card radius */
  --pico-radius-lg: 32px;   /* [PICO-SDK] window corner radius is fixed at 32 dp */
  --pico-radius-pill: 100px; /* [SOURCE .button-container border-radius:100px] */
  --pico-target:    56px;   /* [PICO-SDK] minimum interactive hotspot 56 x 56 dp; also [SOURCE .triggerButton 56px] */
  --pico-pad:       32px;   /* [PICO-SDK] "Padding Large" 32 dp, window edge to content */
  --pico-gap:       16px;   /* [PICO-SDK] "Padding Regular" 16 dp */
}

/* Utilities. Plain CSS, no build step. */

.pico-panel {
  background: var(--pico-surface);
  color: var(--pico-ink);
  border: 1px solid var(--pico-rule);
  border-radius: var(--pico-radius-lg);
  padding: var(--pico-pad);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  font-family: var(--pico-font-body);
}

.pico-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: var(--pico-target);
  min-height: var(--pico-target);
  padding: 0 24px;
  border: 0;
  border-radius: var(--pico-radius-pill);      /* [SOURCE .button-container] every PICO CTA is a pill */
  background: var(--pico-accent-fill);
  color: #fff;
  font: 600 19px/1 var(--pico-font-body);      /* white on #4200ff is 7.9:1; 19px also keeps the danger variant (3.3:1) at WCAG large-text size */
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.pico-btn:hover,
.pico-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--pico-glow), 0 0 24px color-mix(in srgb, var(--pico-glow) 45%, transparent);
  transform: translateY(-2px);                 /* [PICO-SDK] hover pop 2-6 dp (playbook F3.2), flattened to 2D */
  outline: none;
}
.pico-btn:active { transform: translateY(0); }
/* Primary pill only: PICO darkens the violet with a 12% black overlay on hover [SOURCE .button-container:hover]. */
.pico-btn:not(.pico-btn--ghost):not(.pico-btn--danger):hover {
  background: linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.12)), var(--pico-accent-fill);
}
.pico-btn--ghost  { background: transparent; color: var(--pico-ink); box-shadow: inset 0 0 0 1px var(--pico-accent); } /* [SOURCE .btn-container 1px violet outline pill] */
.pico-btn--danger { background: var(--pico-danger); font-weight: 700; }

.pico-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pico-surface-2);
  color: var(--pico-ink-dim);
  font: 500 12px/1.4 var(--pico-font-body);    /* 12 = PICO labelMedium; never make a chip the only tap target */
  border: 1px solid var(--pico-rule);
}
.pico-chip--ok     { color: var(--pico-ok); }
.pico-chip--warn   { color: var(--pico-warn); }
.pico-chip--danger { color: var(--pico-danger); }

.pico-kbd {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--pico-surface-2);
  border: 1px solid var(--pico-rule);
  border-bottom-width: 2px;
  color: var(--pico-ink);
  font: 500 0.9em/1.4 var(--pico-font-mono);
}

.pico-display {
  font-family: var(--pico-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;                     /* [DERIVED] Figtree sets slightly looser than PICO Sans */
  color: var(--pico-ink);
}