/* ============================================================
   Marlin Photo AI Editor — Design Tokens & Base Styles
   Neutral dark-gray pro photo tool. SF Pro. One blue accent.
   ============================================================ */

:root {
  /* Type */
  --font: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", sans-serif;
  --mono: "SF Mono", ui-monospace, "Menlo", monospace;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* Radii (Tahoe-era, generous) */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 11px; --r-xl: 16px; --r-2xl: 22px;

  /* Accent + semantic (stable across themes, tuned per theme below) */
  --accent: #0a84ff;
  --accent-press: #0060df;
  --free: #30d158;
  --free-dim: rgba(48,209,88,0.16);
  --paid: #ff9f0a;
  --paid-dim: rgba(255,159,10,0.16);
  --danger: #ff453a;
  --star: #ffce47;

  --shadow-pop: 0 10px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.25);
}

/* ---------- DARK (default / editing) ---------- */
.theme-dark {
  --bg-window: #1c1c1e;
  --bg-titlebar: #2a2a2c;
  --bg-sidebar: #232325;
  --bg-content: #1c1c1e;
  --bg-canvas: #0d0d0e;
  --bg-panel: #232325;
  --bg-elevated: #2c2c2e;
  --bg-hover: rgba(255,255,255,0.06);
  --bg-active: rgba(255,255,255,0.10);
  --fill-input: rgba(255,255,255,0.07);
  --fill-track: rgba(255,255,255,0.14);
  --separator: rgba(255,255,255,0.09);
  --separator-strong: rgba(255,255,255,0.16);
  --text-primary: rgba(255,255,255,0.92);
  --text-secondary: rgba(255,255,255,0.56);
  --text-tertiary: rgba(255,255,255,0.32);
  --text-on-accent: #fff;
  --accent: #0a84ff;
  --accent-press: #0a6fd8;
  --selected-fill: rgba(10,132,255,0.22);
  --selected-border: rgba(10,132,255,0.7);
  --window-border: rgba(255,255,255,0.10);
  --window-shadow: 0 28px 80px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(0,0,0,0.5);
}

/* ---------- LIGHT ---------- */
.theme-light {
  --bg-window: #ececee;
  --bg-titlebar: #e2e2e5;
  --bg-sidebar: #e8e8ea;
  --bg-content: #f4f4f6;
  --bg-canvas: #c9c9ce;
  --bg-panel: #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover: rgba(0,0,0,0.05);
  --bg-active: rgba(0,0,0,0.08);
  --fill-input: rgba(0,0,0,0.045);
  --fill-track: rgba(0,0,0,0.13);
  --separator: rgba(0,0,0,0.10);
  --separator-strong: rgba(0,0,0,0.16);
  --text-primary: rgba(0,0,0,0.88);
  --text-secondary: rgba(0,0,0,0.5);
  --text-tertiary: rgba(0,0,0,0.3);
  --text-on-accent: #fff;
  --accent: #007aff;
  --accent-press: #0062cc;
  --selected-fill: rgba(0,122,255,0.16);
  --selected-border: rgba(0,122,255,0.65);
  --free: #1ea54a;
  --free-dim: rgba(30,165,74,0.14);
  --paid: #d68000;
  --paid-dim: rgba(214,128,0,0.14);
  --window-border: rgba(0,0,0,0.14);
  --window-shadow: 0 28px 80px rgba(0,0,0,0.28), 0 0 0 0.5px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(1200px 700px at 30% 0%, #3a3a40 0%, transparent 60%),
    linear-gradient(160deg, #2a2a2e 0%, #161618 60%, #0c0c0d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#root { width: 100%; height: 100%; }

/* Desktop backdrop behind the window */
.desktop {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
::selection { background: var(--accent); color: #fff; }

/* Scrollbars — quiet macOS overlay style */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--separator-strong) transparent; }
.scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-thumb { background: var(--separator-strong); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: padding-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* Generic transitions */
.tap { transition: background 120ms ease, color 120ms ease, transform 80ms ease, border-color 120ms ease, opacity 120ms ease; }
.tap:active { transform: scale(0.97); }

/* Focus ring */
.focusring:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes popin { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes slidein { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }