@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

/* ============================================================
   LAZYAPP — brutalist UI kit for the editor / tools.
   White surfaces · grey thin frames · small hard shadows ·
   teal & coral accents. 100% token-built — every value below
   is a --la-* token; classes only compose tokens.
   Use these classes for ALL tool chrome (never ad-hoc styles).
   ============================================================ */
:root{
  /* colour */
  --la-paper:  #ffffff;   /* surfaces            */
  --la-bg:     #eceae4;   /* app background      */
  --la-ink:    #1a1a1a;   /* text                */
  --la-line:   #9a9a9a;   /* frames (grey)       */
  --la-shadow: #cfcfcf;   /* hard shadow (grey)  */
  --la-teal:   #33c4bf;   /* accent — teal (lightened) */
  --la-coral:  #ff6f5e;   /* accent — coral      */
  /* type */
  --la-font:   'Space Grotesk', system-ui, sans-serif;
  /* form */
  --la-frame:  1.5px;     /* border width        */
  --la-shadow-size: 2px;  /* hard-shadow offset  */
  --la-radius: 0px;       /* brutalist: sharp    */
}

.la-app   { font-family:var(--la-font); color:var(--la-ink); background:var(--la-bg); }

.la-panel {
  background:var(--la-paper);
  border:var(--la-frame) solid var(--la-line);
  border-radius:var(--la-radius);
  box-shadow:var(--la-shadow-size) var(--la-shadow-size) 0 var(--la-shadow);
}

.la-title { font-family:var(--la-font); font-weight:800; font-size:23px; text-transform:uppercase; letter-spacing:.3px; color:var(--la-ink); }
.la-label { font-family:var(--la-font); font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.8px; color:var(--la-ink); }

.la-btn {
  font-family:var(--la-font); font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.5px;
  background:var(--la-paper); color:var(--la-ink);
  border:var(--la-frame) solid var(--la-line);
  border-radius:var(--la-radius);
  box-shadow:none;
  padding:9px 14px; cursor:pointer; transition:box-shadow .1s ease, transform .1s ease;
}
.la-btn:hover  { box-shadow:var(--la-shadow-size) var(--la-shadow-size) 0 var(--la-ink); }
.la-btn:active { transform:translate(var(--la-shadow-size), var(--la-shadow-size)); box-shadow:none; }
.la-btn[aria-pressed="true"]        { background:var(--la-ink);   color:var(--la-paper); }
.la-btn--teal[aria-pressed="true"]  { background:var(--la-teal);  color:var(--la-paper); }
.la-btn--coral[aria-pressed="true"] { background:var(--la-coral); color:var(--la-ink); }

.la-swatch { border:var(--la-frame) solid var(--la-ink); border-radius:var(--la-radius); }

/* ---------- DAY / NIGHT SWITCH ---------- */
.la-switch{
  display:inline-flex; align-items:stretch; padding:0; cursor:pointer;
  background:var(--la-paper);
  border:var(--la-frame) solid var(--la-line);
  border-radius:var(--la-radius);
  box-shadow:none;
  transition:box-shadow .1s ease, transform .1s ease;
}
.la-switch:hover  { box-shadow:var(--la-shadow-size) var(--la-shadow-size) 0 var(--la-ink); }
.la-switch:active { transform:translate(var(--la-shadow-size), var(--la-shadow-size)); box-shadow:none; }
.la-switch__opt{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:28px; color:var(--la-line);
  transition:background .15s ease, color .15s ease;
}
.la-switch__opt + .la-switch__opt{ border-left:var(--la-frame) solid var(--la-line); }
.la-switch[data-on="dark"]  .la-switch__opt--moon,
.la-switch[data-on="light"] .la-switch__opt--sun { background:var(--la-ink); color:var(--la-paper); }

/* ---------- ICON RAIL buttons ---------- */
.la-iconbtn{ background:none; border:none; cursor:pointer; color:var(--la-teal); display:flex; align-items:center; justify-content:center; padding:13px 4px; width:100%; opacity:1; transition:background .12s ease, color .12s ease; }
.la-iconbtn svg{ width:28px; height:28px; }
.la-iconbtn:hover{ background:color-mix(in oklab, var(--la-teal), transparent 86%); }
.la-iconbtn[aria-pressed="true"]{ background:var(--la-teal); color:var(--la-paper); }

/* ---------- DARK THEME (set data-theme="dark" high in the tree) ---------- */
[data-theme="dark"]{
  --la-paper:  #202227;   /* panels            */
  --la-bg:     #141518;   /* app background    */
  --la-ink:    #ecebe6;   /* text (light)      */
  --la-line:   #ffffff;   /* frames (white on dark) */
  --la-shadow: #0a0a0c;   /* hard shadow       */
}

/* ---------- FORM FIELDS (Content editor) ---------- */
.la-field { display:flex; flex-direction:column; gap:6px; }
.la-input, .la-textarea {
  font-family:var(--la-font); font-size:15px; color:var(--la-ink);
  background:var(--la-paper);
  border:var(--la-frame) solid var(--la-line);
  border-radius:var(--la-radius);
  padding:9px 11px; width:100%; box-sizing:border-box;
  transition:box-shadow .1s ease;
}
.la-textarea { resize:vertical; min-height:72px; line-height:1.4; }
.la-input:focus, .la-textarea:focus { outline:none; box-shadow:var(--la-shadow-size) var(--la-shadow-size) 0 var(--la-teal); }
.la-input::placeholder, .la-textarea::placeholder { color:var(--la-line); opacity:.8; }
.la-hint { font-family:var(--la-font); font-size:12.5px; line-height:1.4; color:var(--la-line); }

/* ---------- IMAGE UPLOAD (Content editor) ---------- */
.la-imgrow { display:flex; gap:10px; align-items:flex-start; }
.la-drop {
  width:72px; height:72px; flex-shrink:0; cursor:pointer;
  border:var(--la-frame) dashed var(--la-line); border-radius:var(--la-radius);
  background-color:var(--la-bg); background-position:center; background-size:cover; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center;
  color:var(--la-line); font-size:26px; line-height:1; font-weight:400;
  transition:box-shadow .1s ease;
}
.la-drop:hover { box-shadow:var(--la-shadow-size) var(--la-shadow-size) 0 var(--la-teal); }

/* ---------- CONTENT MODE — section picking in the preview ---------- */
.la-wide { width:480px !important; }
#lvpe-surf[data-content="on"] [data-section-id] { cursor:pointer; }
#lvpe-surf[data-content="on"] [data-section-id]:hover { outline:2px dashed var(--brand, #2f5a4a); outline-offset:3px; }