/* PRIZMA_SYNC_START */
/* ─── Prizma Design System — CSS Custom Properties ──────────────────────────
   Source: Token Studio → auto-generated by scripts/sync-tokens.ts
   DO NOT EDIT this block manually — run `npm run sync-tokens` to update.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --prizma-surface-0:                #ffffff;
  --prizma-surface-50:               #fcfcfd;
  --prizma-surface-100:              #ebecef;
  --prizma-surface-150:              #d9dae1;
  --prizma-surface-200:              #c6c8d2;
  --prizma-surface-300:              #a3a8b8;
  --prizma-surface-800:              #262831;
  --prizma-surface-900:              #14151a;
  --prizma-surface-brand-50:         #e5f0ff;
  --prizma-surface-brand-100:        #bfdfff;
  --prizma-surface-brand:            #006aff;
  --prizma-surface-neg-50:           #fff0f0;
  --prizma-surface-neg:              #e71111;
  --prizma-surface-warn-50:          #fff7eb;
  --prizma-surface-warn:             #ff9900;
  --prizma-surface-pos-50:           #e4fbf0;
  --prizma-surface-pos:              #189f60;
  --prizma-text-primary:             #262831;
  --prizma-text-secondary:           #60667c;
  --prizma-text-tertiary:            #a3a8b8;
  --prizma-text-muted:               #82879a;
  --prizma-text-inverse:             #ffffff;
  --prizma-text-brand:               #006aff;
  --prizma-text-brand-sec:           #820ad1;
  --prizma-text-link:                #006aff;
  --prizma-text-link-hover:          #66a6ff;
  --prizma-text-link-disabled:       #60667c;
  --prizma-text-neg:                 #e71111;
  --prizma-text-warn:                #ff9900;
  --prizma-text-pos:                 #189f60;
  --prizma-icon-inverse:             #ffffff;
  --prizma-icon-tertiary:            #a3a8b8;
  --prizma-icon-secondary:           #60667c;
  --prizma-icon-primary:             #262831;
  --prizma-icon-brand:               #006aff;
  --prizma-icon-neg:                 #e71111;
  --prizma-icon-warn:                #ff9900;
  --prizma-icon-pos:                 #189f60;
  --prizma-border-100:               #ebecef;
  --prizma-border-200:               #c6c8d2;
  --prizma-border-300:               #a3a8b8;
  --prizma-border-400:               #82879a;
  --prizma-border-500:               #60667c;
  --prizma-border-brand:             #006aff;
  --prizma-border-focus:             #006aff;
  --prizma-border-neg:               #e71111;
  --prizma-border-warn:              #ff9900;
  --prizma-border-pos:               #189f60;

  /* Spacing — 4px base scale */
    --prizma-space-0:   0px;
    --prizma-space-2:   2px;
    --prizma-space-4:   4px;
    --prizma-space-8:   8px;
    --prizma-space-12:  12px;
    --prizma-space-16:  16px;
    --prizma-space-20:  20px;
    --prizma-space-24:  24px;
    --prizma-space-32:  32px;
    --prizma-space-40:  40px;
    --prizma-space-48:  48px;
    --prizma-space-64:  64px;
    --prizma-space-80:  80px;
    --prizma-space-96:  96px;
    --prizma-space-120: 120px;
  
    /* Border Radius */
    --prizma-radius-none: 0px;
    --prizma-radius-xs:   4px;
    --prizma-radius-sm:   8px;
    --prizma-radius-md:   16px;
    --prizma-radius-lg:   24px;
    --prizma-radius-xl:   40px;
    --prizma-radius-xxl:  64px;
    --prizma-radius-full: 9999px;
  
    /* Border Width */
    --prizma-border-width-none:    0px;
    --prizma-border-width-regular: 1px;
    --prizma-border-width-bold:    2px;
  
    /* Icon Sizes */
    --prizma-icon-xxs:  16px;
    --prizma-icon-xs:   20px;
    --prizma-icon-sm:   24px;
    --prizma-icon-md:   32px;
    --prizma-icon-lg:   40px;
    --prizma-icon-xl:   48px;
    --prizma-icon-xxl:  64px;
    --prizma-icon-xxxl: 80px;
  
    /* Typography */
    --prizma-font-display: 'Rethink Sans', sans-serif;
    --prizma-font-ui:      'DM Sans', sans-serif;
}

/* ─── Prizma Dark Mode Overrides ─────────────────────────────────────────────
   Auto-generated — run `npm run sync-tokens` to update.
   Note: Studio chrome stays light — only #studio-preview-root uses .dark.
   ─────────────────────────────────────────────────────────────────────────── */
.dark {
  --prizma-surface-0:                #000000;
  --prizma-surface-50:               #14151a;
  --prizma-surface-100:              #262831;
  --prizma-surface-150:              #30333e;
  --prizma-surface-200:              #3a3e4b;
  --prizma-surface-300:              #60667c;
  --prizma-surface-800:              #ebecef;
  --prizma-surface-900:              #ffffff;
  --prizma-surface-brand-50:         #21273b;
  --prizma-surface-brand-100:        #21273b;
  --prizma-surface-brand:            #ffffff;
  --prizma-surface-neg-50:           #240001;
  --prizma-surface-neg:              #ff5a5f;
  --prizma-surface-warn-50:          #271400;
  --prizma-surface-warn:             #ffb647;
  --prizma-surface-pos-50:           #03190e;
  --prizma-surface-pos:              #45b380;
  --prizma-text-primary:             #fcfcfd;
  --prizma-text-secondary:           #a3a8b8;
  --prizma-text-tertiary:            #60667c;
  --prizma-text-muted:               #60667c;
  --prizma-text-inverse:             #ffffff;
  --prizma-text-brand:               #006aff;
  --prizma-text-brand-sec:           #820ad1;
  --prizma-text-link:                #3388ff;
  --prizma-text-link-hover:          #66a6ff;
  --prizma-text-link-disabled:       #60667c;
  --prizma-text-neg:                 #ff5a5f;
  --prizma-text-warn:                #ffb647;
  --prizma-text-pos:                 #189f60;
  --prizma-icon-inverse:             #262831;
  --prizma-icon-tertiary:            #60667c;
  --prizma-icon-secondary:           #a3a8b8;
  --prizma-icon-primary:             #ebecef;
  --prizma-icon-brand:               #006aff;
  --prizma-icon-neg:                 #ff5a5f;
  --prizma-icon-warn:                #ffb647;
  --prizma-icon-pos:                 #45b380;
  --prizma-border-100:               #3a3e4b;
  --prizma-border-200:               #4d5264;
  --prizma-border-300:               #60667c;
  --prizma-border-400:               #60667c;
  --prizma-border-500:               #a3a8b8;
  --prizma-border-brand:             #006aff;
  --prizma-border-focus:             #0099ff;
  --prizma-border-neg:               #ff5a5f;
  --prizma-border-warn:              #ffb647;
  --prizma-border-pos:               #189f60;
}
/* PRIZMA_SYNC_END */


/* ─── Studio Preview CSS Variables ──────────────────────────────────────────
   Injected per-frame on #studio-preview-root so only the preview reacts.
   These are separate from Prizma vars — they represent the client's
   SDK customization (primaryColor, cornerRadius, etc.)
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --studio-primary:   #006AFF;  /* maps to Prizma Color/Brand/500 by default */
  --studio-secondary: #BFDFFF;  /* maps to Prizma Color/Brand/100 by default */
  --studio-radius:    16px;     /* maps to Prizma Border/Radius/medium by default */
  --studio-font:      var(--prizma-font-ui);
  --studio-spacing:   1;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────────*/
.panel-scroll::-webkit-scrollbar       { width: 4px; }
.panel-scroll::-webkit-scrollbar-track { background: transparent; }
.panel-scroll::-webkit-scrollbar-thumb {
  background: var(--prizma-border-100);
  border-radius: 2px;
}
.panel-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--prizma-border-200);
}

/* Remove focus ring when using mouse */
.using-mouse :focus { outline: none; }

/* ─── Canvas utilities ───────────────────────────────────────────────────────*/
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Inspect mode ───────────────────────────────────────────────────────────*/
.inspect-mode * { cursor: crosshair !important; }

/* Chrome UI (zoom bar, popover) keeps normal cursor */
.inspect-mode [data-canvas-chrome],
.inspect-mode [data-canvas-chrome] * { cursor: auto !important; }

/* Inspectable elements signal clickability */
.inspect-mode [data-inspect] { cursor: pointer !important; }

/* Positioning context required for ::before chip and ::after frame */
.inspect-mode [data-hover],
.inspect-mode [data-inspect] { position: relative; }

/* Suppress ALL pointer/hover effects inside the preview root so screen elements
   cannot trigger native hover states (button darkening, cursor changes, etc.).
   Re-enable only elements explicitly annotated for inspection.                */
.inspect-mode #studio-preview-root * {
  pointer-events: none !important;
}
.inspect-mode #studio-preview-root [data-hover],
.inspect-mode #studio-preview-root [data-inspect] {
  pointer-events: auto !important;
}

/* ── Hover highlight frame (::after) ────────────────────────────────────── */
/* ::after with inset:-8px creates equal 8px padding on all four sides.      */
/* border-radius:8px keeps corners rounded regardless of the element shape.  */
/* z-index:2 layers it above element content; pointer-events:none is passive. */

/* View-only — gray border + subtle gray fill */
.inspect-mode [data-hover]:hover::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid #A3A8B8;
  background: rgba(163, 168, 184, 0.08);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}

/* Inspectable — brand-500 border + brand-50 fill (higher specificity wins) */
.inspect-mode [data-inspect][data-hover]:hover::after,
.inspect-mode [data-inspect]:hover::after {
  border-color: #006AFF;
  background: rgba(229, 240, 255, 0.55);
}

/* ── Label chip (::before) ───────────────────────────────────────────────── */
/* Figma spec: padding 4px 8px, h=24px, rx=8px, DM Sans 400 12px/16px white  */

/* Gray chip — view-only elements */
.inspect-mode [data-hover]:hover::before {
  content: attr(data-hover);
  position: absolute;
  /* Clear the 8px ::after frame + 4px breathing gap = 12px above element top */
  bottom: calc(100% + 12px);
  left: 0;
  background: #A3A8B8;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  letter-spacing: 0;
}

/* Blue chip — inspectable elements (2-attribute selector beats 1-attribute) */
.inspect-mode [data-inspect][data-hover]:hover::before {
  background: #006AFF;
}

/* Keep Next.js dev portal unconstrained by top/left origin. */
nextjs-portal {
  left: unset !important;
  top: unset !important;
}