/* Recently — design tokens.

   These describe the *product chrome*: landing, auth, editor and dashboard.
   They are deliberately namespaced --app-* so that user-selected profile
   themes (which override --bg, --fg and friends) can never restyle the
   application UI. Loaded before app.css and inherited by the React editor.

   Direction: cool white, one confident violet, and a small set of flat
   accent colours used as real fills rather than 5%-opacity tints. Type is
   Space Grotesk for display and Inter for everything else -- no serif
   anywhere, and hard jumps in the scale rather than a gentle ramp. */

:root {
  /* Type. Space Grotesk carries the personality (its g, a and k are
     distinctive); Inter does the quiet work at small sizes. */
  --app-font: "Inter Var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --app-font-display: "Space Grotesk", "Inter Var", -apple-system, BlinkMacSystemFont, sans-serif;
  --app-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Modular scale with deliberate gaps at the top, so a headline next to body
     copy reads as a different kind of thing rather than just bigger text. */
  --app-text-xs: 0.75rem;
  --app-text-sm: 0.875rem;
  --app-text-base: 1rem;
  --app-text-lg: 1.125rem;
  --app-text-xl: 1.375rem;
  --app-text-2xl: 1.875rem;
  --app-text-3xl: 2.5rem;
  --app-text-4xl: 3.25rem;
  --app-text-5xl: 4.5rem;

  /* Spacing, 4px base. */
  --app-space-1: 0.25rem;
  --app-space-2: 0.5rem;
  --app-space-3: 0.75rem;
  --app-space-4: 1rem;
  --app-space-5: 1.5rem;
  --app-space-6: 2rem;
  --app-space-7: 3rem;
  --app-space-8: 4rem;
  --app-space-9: 6rem;

  /* Colour. Cool white and a cool near-black -- warm greys are what made the
     old palette read as "editorial". */
  --app-bg: #ffffff;
  --app-surface: #ffffff;
  --app-surface-sunk: #f4f5f9;
  --app-surface-deep: #ebecf3;
  --app-fg: #0d0d12;
  --app-fg-muted: #5b5f6e;
  --app-fg-subtle: #8a8f9e;
  --app-border: #e8e9f0;
  --app-border-strong: #d7d9e4;

  --app-accent: #6d4aff;
  --app-accent-strong: #5a35f0;
  --app-accent-soft: #efeaff;
  --app-accent-fg: #ffffff;

  /* Support colours. Used as flat fills on cards and chips, which is what
     keeps the page from looking like white boxes with grey hairlines. */
  --app-lime: #c2f04c;
  --app-lime-soft: #f0fbd0;
  --app-coral: #ff5c7a;
  --app-coral-soft: #ffe6eb;
  --app-cyan: #22d3ee;
  --app-cyan-soft: #d9f7fd;
  --app-amber: #ffb020;
  --app-amber-soft: #fff2d6;

  --app-positive: #10a35f;
  --app-positive-soft: #dcf7e9;
  --app-negative: #e5484d;
  --app-negative-soft: #ffe5e6;

  /* Chart series. Violet for the primary metric, cyan for the secondary. */
  --app-chart-1: #6d4aff;
  --app-chart-2: #22d3ee;

  /* Chunky. Small radii are what make an interface read as "SaaS template". */
  --app-radius-sm: 10px;
  --app-radius: 16px;
  --app-radius-lg: 24px;
  --app-radius-full: 999px;

  /* Shadows do the work that 1px borders used to. */
  --app-shadow-sm: 0 1px 2px rgba(13, 13, 18, 0.06), 0 1px 1px rgba(13, 13, 18, 0.04);
  --app-shadow: 0 4px 16px rgba(13, 13, 18, 0.08);
  --app-shadow-lg: 0 18px 48px rgba(13, 13, 18, 0.12);
  --app-shadow-accent: 0 8px 24px rgba(109, 74, 255, 0.28);

  --app-measure: 38rem;
  --app-wide: 72rem;
}

/* --- base ---------------------------------------------------------------- */

.app-display {
  font-family: var(--app-font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* --- shared primitives --------------------------------------------------- */

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-space-2);
  padding: 0.7rem 1.25rem;
  border: 1.5px solid var(--app-border-strong);
  border-radius: var(--app-radius-full);
  background: var(--app-surface);
  color: var(--app-fg);
  font-family: var(--app-font);
  font-size: var(--app-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              transform 0.12s ease, box-shadow 0.15s ease;
}
.app-btn:hover { background: var(--app-surface-sunk); border-color: var(--app-fg-subtle); }
.app-btn:active { transform: translateY(1px); }
.app-btn:focus-visible { outline: 3px solid var(--app-accent); outline-offset: 2px; }
.app-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.app-btn-primary {
  background: var(--app-accent);
  border-color: var(--app-accent);
  color: var(--app-accent-fg);
  box-shadow: var(--app-shadow-accent);
}
.app-btn-primary:hover {
  background: var(--app-accent-strong);
  border-color: var(--app-accent-strong);
  transform: translateY(-1px);
}
.app-btn-primary:active { transform: translateY(0); }

/* The lime button is the loud one. Dark text on it, because white text on
   lime is unreadable at any weight. */
.app-btn-pop {
  background: var(--app-lime);
  border-color: var(--app-lime);
  color: var(--app-fg);
}
.app-btn-pop:hover { background: #b6e83a; border-color: #b6e83a; transform: translateY(-1px); }

.app-btn-lg { padding: 0.9rem 1.75rem; font-size: var(--app-text-base); }
.app-btn-sm { padding: 0.45rem 0.9rem; font-size: var(--app-text-xs); }
.app-btn-ghost { background: transparent; border-color: transparent; }
.app-btn-ghost:hover { background: var(--app-surface-sunk); border-color: transparent; }

/* Destructive actions. Outlined rather than filled: a solid red button reads
   as the page's primary action, which is exactly the wrong emphasis on a
   screen whose safe option is to leave. */
.app-btn-danger {
  color: var(--app-negative);
  border-color: color-mix(in srgb, var(--app-negative) 35%, var(--app-border));
  background: var(--app-surface);
}
.app-btn-danger:hover {
  background: var(--app-negative-soft);
  border-color: var(--app-negative);
}
.app-btn-danger:focus-visible { outline-color: var(--app-negative); }

/* A submit button that has to look and sit like a plain inline link. */
.app-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.app-input,
.app-textarea,
.app-select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface-sunk);
  color: var(--app-fg);
  font-family: var(--app-font);
  font-size: var(--app-text-sm);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-input::placeholder,
.app-textarea::placeholder { color: var(--app-fg-subtle); }
.app-input:hover,
.app-textarea:hover,
.app-select:hover { border-color: var(--app-border-strong); }
.app-input:focus,
.app-textarea:focus,
.app-select:focus {
  outline: none;
  background: var(--app-surface);
  border-color: var(--app-accent);
  box-shadow: 0 0 0 4px var(--app-accent-soft);
}
.app-textarea { resize: vertical; min-height: 5rem; line-height: 1.55; }

.app-label {
  display: block;
  margin-bottom: var(--app-space-2);
  font-size: var(--app-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-fg-muted);
}

.app-card {
  background: var(--app-surface);
  border: 1.5px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
}

.app-muted { color: var(--app-fg-muted); }

.app-eyebrow {
  display: inline-block;
  font-size: var(--app-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-accent);
}

/* A skewed block of colour sitting behind a word. It is a pseudo-element
   behind the text rather than a background on it, so the colour can bleed
   past the glyph edges and sit at a slight angle. */
.app-mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.app-mark::before {
  content: "";
  position: absolute;
  inset: 0.12em -0.18em 0.08em;
  background: var(--app-lime);
  transform: skewX(-8deg) rotate(-1deg);
  border-radius: 4px;
  z-index: -1;
}

.app-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--app-space-1);
  padding: 0.3rem 0.65rem;
  border-radius: var(--app-radius-full);
  background: var(--app-surface-sunk);
  color: var(--app-fg-muted);
  font-size: var(--app-text-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.app-chip-accent { background: var(--app-accent-soft); color: var(--app-accent-strong); }
.app-chip-up { background: var(--app-positive-soft); color: var(--app-positive); }
.app-chip-down { background: var(--app-negative-soft); color: var(--app-negative); }

.app-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: var(--app-radius-full);
  background: var(--app-fg);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- app bar ------------------------------------------------------------- */
/* Shared chrome for signed-in pages (editor, dashboard). */

.app-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1.5px solid var(--app-border);
}
.app-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--app-space-5);
  max-width: var(--app-wide);
  margin: 0 auto;
  padding: var(--app-space-3) var(--app-space-5);
}
.app-bar-brand {
  font-family: var(--app-font-display);
  font-weight: 700;
  font-size: var(--app-text-lg);
  letter-spacing: -0.03em;
  color: var(--app-fg);
  text-decoration: none;
}
.app-bar-nav {
  display: flex;
  gap: var(--app-space-2);
  margin-right: auto;
  font-size: var(--app-text-sm);
}
.app-bar-nav a {
  color: var(--app-fg-muted);
  text-decoration: none;
  font-weight: 600;
  padding: var(--app-space-2) var(--app-space-3);
  border-radius: var(--app-radius-full);
}
.app-bar-nav a:hover { color: var(--app-fg); background: var(--app-surface-sunk); }
.app-bar-nav a.is-current { color: var(--app-accent-strong); background: var(--app-accent-soft); }

@media (max-width: 640px) {
  .app-bar-inner { flex-wrap: wrap; gap: var(--app-space-3); }
  .app-bar-nav { order: 3; width: 100%; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .app-btn { transition: none; }
  .app-btn:hover, .app-btn:active { transform: none; }
}