/* ═══════════════════════════════════════════════════════════
   Studio MX — Global Stylesheet
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Site-wide letter spacing (overrides headings, labels, builder chrome, SVG text, etc.) */
html body,
html body *,
html body *::before,
html body *::after {
  letter-spacing: 0px !important;
}

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Brand */
  --color-teal:         #00CCBC;
  --color-teal-dark:    #00A898;
  --color-teal-light:   #e6faf8;

  /* Monochrome (canonical — use var(--color-black) / var(--color-white) in authored CSS) */
  --color-black:        #111111;
  --color-white:        #ffffff;

  /* Palette */
  --black:              var(--color-black);
  --white:              var(--color-white);
  --teal:               #00CCBC;
  --green:              #1FA74F;
  --yellow:             #FAC000;
  --grey-light:         #E4E4E4;
  --grey-dark:          #e9e9e9;

  /* Neutrals */
  --color-grey-100:     #f3f4f6;
  --color-grey-200:     #e4e4e4;
  --color-grey-300:     #d1d5db;
  --color-grey-400:     #9ca3af;
  --color-grey-500:     #6b7280;
  --color-grey-600:     #4b5563;

  /* Semantic */
  --color-text-primary:   var(--color-black);
  --color-text-secondary: #6b7280;
  --color-text-muted:     #9ca3af;
  --color-text-inverse:   var(--color-white);
  --color-border:         #e4e4e4;
  --color-bg-base:        #DDE8EC;
  --color-surface:        var(--color-white);

  /* Status */
  --color-success:      #16a34a;
  --color-success-bg:   #f0fdf4;
  --color-warning:      #d97706;
  --color-warning-bg:   #fffbeb;
  --color-error:        #dc2626;
  --color-error-bg:     #fef2f2;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 100px;

  /* Shadow */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 4px 24px rgba(0,0,0,0.07);
}


/* ── Typography scale ───────────────────────────────────────── */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

h1, .h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0;
  color: var(--black);
  padding-bottom: 16px;
}

h2, .h2 {
  font-size: 1.5rem;        /* 24px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h3, .h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--black);
  word-wrap: break-word;
}

/* Builder canvas — H2 & H3 bottom spacing (24px desktop, 16px mobile) */
.canvas-content[data-type="h2"],
.canvas-content[data-type="h2-cs"],
.canvas-content[data-type="h3"] {
  margin-bottom: 0;
  padding-bottom: var(--space-6);
}

/* Builder canvas — H3 (CS): 12px bottom on desktop */
.canvas-content[data-type="h3-cs"] {
  margin-bottom: 0;
  padding-bottom: var(--space-3);
}

@media (max-width: 767px) {
  .canvas-content[data-type="h2"],
  .canvas-content[data-type="h2-cs"],
  .canvas-content[data-type="h3"],
  .canvas-content[data-type="h3-cs"] {
    padding-bottom: var(--space-4);
  }
}

/* Builder canvas — Subtitle: same typography as H3, 20px top + 28px bottom */
.canvas-content[data-type="subtitle"] {
  margin-bottom: 0;
  padding-top: var(--space-5);
  padding-bottom: 28px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-black);
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .canvas-content[data-type="subtitle"] {
    margin-bottom: 0;
    padding-top: 0px;
    padding-bottom: 28px;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-black);
    letter-spacing: -0.01em;
  }
}

/* Builder canvas — optional bottom spacing (8px small, 32px medium, 60px large) */
.canvas-content[data-type="text"] {
  padding: 0;
}
.component-gap-sm {
  padding-bottom: var(--space-2);
}
.canvas-content[data-type="text"].text-gap-md,
.canvas-content[data-type="text"].component-gap-md,
.component-gap-md {
  padding-bottom: var(--space-8);
}
.canvas-content[data-type="text"].text-gap-lg,
.canvas-content[data-type="text"].component-gap-lg,
.component-gap-lg {
  padding-bottom: 60px;
}

/* Builder canvas — Image component width (height follows aspect ratio) */
.canvas-component-wrap--image {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.canvas-component-wrap--image .canvas-text-gap-edit-only {
  align-self: flex-start;
  width: 100%;
}
.canvas-image-wrap {
  position: relative;
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
}
.canvas-image-wrap.image-size-sm {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}
.canvas-image-wrap.image-size-md {
  width: 900px;
  max-width: none;
}
.canvas-image-wrap.image-size-lg {
  width: 1000px;
  max-width: none;
}
.canvas-image-wrap .canvas-image-actual,
.canvas-image-wrap .image-drop-zone {
  width: 100%;
  box-sizing: border-box;
}
.canvas-image-wrap .canvas-image-actual {
  height: auto;
  display: block;
}
.builder-page.is-viewing .canvas-image-wrap {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
  .builder-page.is-viewing .canvas-image-wrap:hover {
    transform: scale(1.03);
  }
}
@media (prefers-reduced-motion: reduce) {
  .builder-page.is-viewing .canvas-image-wrap {
    transition: none;
  }
  .builder-page.is-viewing .canvas-image-wrap:hover {
    transform: none;
  }
}
@media (max-width: 767px) {
  .canvas-image-wrap.image-size-md,
  .canvas-image-wrap.image-size-lg {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .canvas-image-wrap.image-size-sm,
  .canvas-image-wrap.image-size-md,
  .canvas-image-wrap.image-size-lg {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }
}

h4, .h4 {
  font-size: 0.875rem;          /* 14px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-text-primary);
}

.p1 {
  font-size: 1rem;          /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.p2 {
  font-size: 0.875rem;      /* 14px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.label {
  font-size: 0.75rem;       /* 12px */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.caption {
  font-size: 0.75rem;       /* 12px */
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-muted);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--color-teal);
}


/* ── Site chrome background (not the project page hero) ───── */
.gradient-bg {
  background: var(--color-white);
}

/* ─────────────────────────────────────────
   Badge — global component
   Usage: <span class="badge">Label</span>
   Variants: badge-grey, badge-light-grey,
             badge-green, badge-red, badge-blue,
             badge-teal, badge-purple,
             badge-black, badge-yellow,
             badge-amber, badge-pink
───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--color-grey-200);
  color: var(--color-black);
}

.badge-grey {
  background: var(--color-grey-200);
  color: var(--color-black);
}

.badge-light-grey {
  background: var(--color-grey-100);
  color: var(--color-grey-600);
}

.badge-green {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-amber {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge-red {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.badge-blue {
  background: #dbeafe;
  color: #1e40af;
}

.badge-teal {
  background: var(--color-teal-light);
  color: var(--color-teal-dark);
}

.badge-purple {
  background: #ede9fe;
  color: #5b21b6;
}

.badge-yellow {
  background: #fef9c3;
  color: #854d0e;
}

.badge-pink {
  background: #fce7f3;
  color: #9d174d;
}

/* ── Button utilities ──────────────────────────────────────────── */

/* ── Button system ──────────────────────────────────────────────────────────── */

/* Shared base */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

/* Primary — filled black */
.btn-primary {
  background: var(--black);
  color: var(--color-white);
  border: 1.5px solid var(--black);
}
.btn-primary:hover  { background: #333; border-color: #333; }
.btn-primary:active { opacity: 0.8; }

/* Secondary — black stroke, no fill */
.btn-secondary {
  background: none;
  color: var(--black);
  border: 1.5px solid var(--black);
}
.btn-secondary:hover  { background: #f3f4f6; }
.btn-secondary:active { opacity: 0.8; }

/* Ghost — no border, subtle hover */
.btn-ghost {
  background: none;
  color: var(--black);
  border: 1.5px solid transparent;
}
.btn-ghost:hover  { background: #f3f4f6; border-color: #e5e7eb; }
.btn-ghost:active { opacity: 0.8; }

/* Dashed ghost button — use for "add" / "link" affordances */
.btn-dashed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 12px;
  border-radius: 99px;
  border: 1.5px dashed #d1d5db;
  background: none;
  color: #9ca3af;
  font-size: 0.7rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-dashed:hover {
  border-color: #a5b4fc;
  color: #4f46e5;
  background: #eef2ff;
}

.badge-black {
  background: var(--color-black);
  color: var(--color-white);
}

.sidebar-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.sidebar-edit-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
}


/* ── Edit mode toggle switch ────────────────────────────────── */
.edit-switch {
  position: relative;
  width: 43px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

.edit-switch-track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--color-grey-200);
  border: 1px solid #c0c0c0;
  transition: background 0.2s, border-color 0.2s;
}

.edit-switch-track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: left 0.2s;
}

.edit-switch.active .edit-switch-track {
  background: var(--color-black);
  border-color: #7d7d7d;
}

.edit-switch.active .edit-switch-track::after {
  left: calc(100% - 23px);
}


/* ── Utility ────────────────────────────────────────────────── */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-teal      { color: var(--color-teal-dark); }

.bg-surface  { background: var(--color-surface); }
.bg-grey-100 { background: var(--color-grey-100); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }