:root {
  --jl-cyan: #01c1d9;
  --jl-cyan-accessible: #008294;
  --jl-link: #008294;
  --jl-magenta: #f63174;
  --jl-text: #0b1220;
  --jl-ink: #0b1220;
  --jl-text-muted: #5b6575;
  --jl-bg: #fafbfc;
  --jl-surface: #ffffff;
  --jl-border: #e6e9ef;
  --jl-control-border: #7d8594;
  --jl-success: #e8f6ee;
  --jl-success-ink: #0b1220;
  --jl-warning: #fff6e5;
  --jl-warning-ink: #0b1220;
  --jl-danger: #fdecec;
  --jl-danger-ink: #0b1220;
  --jl-info: #e7f7fa;
  --jl-info-ink: #0b1220;
  --jl-surface-2: #f1f5f9;
  --jl-surface-muted: #f1f3f6;
  --jl-inverse: #0b1220; /* dark fills that carry white text (toasts, banners, selected pills) */
  --jl-on-accent: #0b1220; /* text on cyan and other bright fills: stays dark in every theme */
  --jl-font: "Plus Jakarta Sans", system-ui, sans-serif;
  --jl-display-xl: clamp(3.5rem, 10vw, 7rem);
  --jl-display-lg: clamp(2.5rem, 5vw, 3.5rem);
  --jl-display: 2rem;
  --jl-title: 1.5rem;
  --jl-body: 1rem;
  --jl-caption: 0.875rem;
  --jl-badge: 0.75rem;
  --jl-app-title: 1.75rem;
  --jl-app-name: 1.125rem;
  --jl-app-body: 1.0625rem;
  --jl-app-meta: 0.9375rem;
  --jl-radius: 10px;
  --jl-radius-sm: 6px;
  --jl-radius-md: 16px;
  --jl-radius-lg: 1.5rem;
  --jl-radius-full: 9999px;
  --jl-space: 1rem;
  --jl-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px rgba(11, 18, 32, 0.06);
  --jl-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--jl-font);
  /* The font's "fi" ligature drops the dot of the i ("perfil" read as "perfıl"). */
  font-variant-ligatures: no-common-ligatures;
  font-size: var(--jl-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--jl-text);
  background: var(--jl-bg);
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: var(--jl-display);
}

h2 {
  font-size: var(--jl-title);
}

p {
  margin: 0 0 1rem;
  color: var(--jl-text);
}

a {
  color: var(--jl-link);
  text-decoration: none;
}

p a,
.jl-prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: #006b7a;
}

img {
  max-width: 100%;
  height: auto;
}

/* Dark theme: signed-in app only. Set on <html data-theme="dark"> by layouts/app.html; public pages and the
   looks owners pick for their lists never receive it, so they render exactly as designed. */
:root[data-theme="dark"] {
  /* Graphite with a faint teal cast (the brand's cyan, at ~3% saturation) instead of navy slate. Depth comes from
     lightness steps, not shadows; text is off-white; the cyan accent keeps its full strength. */
  color-scheme: dark;
  --jl-link: #3fd3e6;
  --jl-cyan-accessible: #3fd3e6;
  --jl-text: #ecefef;
  --jl-ink: #ecefef;
  --jl-text-muted: #9aa5a8;
  --jl-bg: #0a0d0e;
  --jl-surface: #121618;
  --jl-surface-2: #1a1f22;
  --jl-surface-muted: #1a1f22;
  --jl-inverse: #242b2f;
  --jl-border: #232a2d;
  --jl-control-border: #596469;
  --jl-success: #0f2a1d;
  --jl-success-ink: #ecefef;
  --jl-warning: #2e2711;
  --jl-warning-ink: #ecefef;
  --jl-danger: #321a1c;
  --jl-danger-ink: #ecefef;
  --jl-info: #0c2b31;
  --jl-info-ink: #ecefef;
  --jl-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.45);
  --jl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Public surfaces (including the previews inside the app) always keep the light tokens. */
:root[data-theme="dark"] .jl-public,
:root[data-theme="dark"] .jl-preview-frame {
  color-scheme: light;
  --jl-link: #008294;
  --jl-cyan-accessible: #008294;
  --jl-text: #0b1220;
  --jl-ink: #0b1220;
  --jl-text-muted: #5b6575;
  --jl-bg: #fafbfc;
  --jl-surface: #ffffff;
  --jl-surface-2: #f1f5f9;
  --jl-surface-muted: #f1f3f6;
  --jl-inverse: #0b1220;
  --jl-border: #e6e9ef;
  --jl-control-border: #7d8594;
  --jl-success: #e8f6ee;
  --jl-success-ink: #0b1220;
  --jl-warning: #fff6e5;
  --jl-warning-ink: #0b1220;
  --jl-danger: #fdecec;
  --jl-danger-ink: #0b1220;
  --jl-info: #e7f7fa;
  --jl-info-ink: #0b1220;
  --jl-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px rgba(11, 18, 32, 0.06);
  --jl-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05);
}