/* Lumen site styles: page frame, workspace layout, the projects list and the look of the SaaSLayer widgets, in a
   light and a dark theme chosen by the data-theme attribute the layout sets on <html>. */

:root {
  --lumen-bg: #fbfaf7;
  --lumen-surface: #ffffff;
  --lumen-text: #1d1b16;
  --lumen-muted: #6b665a;
  --lumen-border: #e4dfd3;
  --lumen-border-strong: #8c8676;
  --lumen-accent: #b45309;
  --lumen-widget-primary: #b45309;
  --lumen-accent-text: #ffffff;
  --lumen-danger: #b42318;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --lumen-bg: #15140f;
  --lumen-surface: #1f1d17;
  --lumen-text: #f1ede2;
  --lumen-muted: #a8a294;
  --lumen-border: #37342a;
  --lumen-border-strong: #8a8474;
  --lumen-accent: #f59e0b;
  --lumen-widget-primary: #c2410c;
  --lumen-accent-text: #1d1b16;
  --lumen-danger: #f97066;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lumen-bg);
  color: var(--lumen-text);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

a { color: var(--lumen-accent); }
h1, h2 { line-height: 1.2; }
[hidden] { display: none !important; }

button, .button, input, select {
  font: inherit;
  border: 1px solid var(--lumen-border-strong);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  background: var(--lumen-surface);
  color: var(--lumen-text);
}
button { cursor: pointer; }
.button, button[type='submit'] {
  background: var(--lumen-accent);
  border-color: var(--lumen-accent);
  color: var(--lumen-accent-text);
  text-decoration: none;
}
:disabled { opacity: 0.6; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--lumen-accent); outline-offset: 2px; }

[data-lumen-skip] {
  position: absolute;
  left: -100rem;
  padding: 0.5rem 0.75rem;
  background: var(--lumen-surface);
  border: 2px solid var(--lumen-accent);
  border-radius: 6px;
}
[data-lumen-skip]:focus { left: 0.5rem; top: 0.5rem; z-index: 1; }
main:focus { outline: none; }

[data-lumen-header] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--lumen-surface);
  border-bottom: 1px solid var(--lumen-border);
}
[data-lumen-header] .brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--lumen-text); }
[data-lumen-header] [data-lumen-banner] { color: var(--lumen-muted); font-size: 0.875rem; margin-right: auto; }
[data-lumen-header] .account { display: flex; align-items: center; gap: 0.75rem; }

main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem; }
.workspace { display: grid; grid-template-columns: 15rem 1fr; min-height: calc(100vh - 3.5rem); }
.workspace main { margin: 0; max-width: 52rem; }

[data-lumen-nav] { padding: 1.25rem; border-right: 1px solid var(--lumen-border); background: var(--lumen-surface); }
[data-lumen-nav] ul { list-style: none; margin: 1.25rem 0 0; padding: 0; }
[data-lumen-nav] a { display: block; padding: 0.4rem 0.6rem; border-radius: 6px; color: var(--lumen-text); text-decoration: none; }
[data-lumen-nav] a[aria-current='page'] { background: var(--lumen-bg); font-weight: 600; }

.hero { padding: 3rem 0 1rem; }
.hero h1 { font-size: 3rem; margin: 0 0 0.5rem; }
.hero .lead { font-size: 1.25rem; max-width: 36rem; }
.hero [data-lumen-banner], .features { color: var(--lumen-muted); }
.auth { max-width: 26rem; margin: 0 auto; }

main section { margin: 0 0 2.5rem; }
pre { overflow-x: auto; padding: 0.75rem 1rem; background: var(--lumen-surface); border: 1px solid var(--lumen-border); border-radius: 6px; }

[data-lumen-notice], [data-lumen-message], [data-lumen-status][role='alert'] { color: var(--lumen-danger); }
[data-lumen-notice] { max-width: 60rem; margin: 1rem auto; padding: 0 1.25rem; }
[data-lumen-readonly] { color: var(--lumen-muted); }

[data-lumen-list] { list-style: none; padding: 0; margin: 1rem 0; }
[data-lumen-project] { display: flex; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--lumen-border); }
[data-lumen-project] [data-lumen-name] { flex: 1; }
[data-lumen-create] { display: flex; align-items: end; gap: 0.5rem; margin: 1rem 0; }
[data-lumen-create] label { display: grid; gap: 0.25rem; flex: 1; }

/* The SaaSLayer widgets, in Lumen's colours. The tokens are set on the elements themselves: each widget draws inside
   its own shadow root and reads these from its host. They follow the theme because they point at the tokens above.
   The widgets draw primary buttons with white text, so their primary is a colour white reads on in both themes. */
sl-sign-in, sl-sign-up, sl-accept-invitation, sl-user-button, sl-org-switcher, sl-org-profile,
sl-organization-invitations, sl-create-organization, sl-role-editor, sl-groups, sl-user-grants,
sl-effective-permissions, sl-access-requests, sl-api-keys, sl-audit-log, sl-user-profile, sl-passkeys,
sl-account-portal {
  --sl-color-primary: var(--lumen-widget-primary);
  --sl-color-text: var(--lumen-text);
  --sl-color-background: var(--lumen-surface);
  --sl-color-danger: var(--lumen-danger);
  --sl-color-border: var(--lumen-border-strong);
  --sl-border-radius: 6px;
  --sl-font-family: inherit;
  --sl-spacing-unit: 8px;
}

/* The parts the widgets expose: their forms, social buttons, phone fields and error messages. */
::part(form) { gap: 0.875rem; }
::part(social) { margin-top: 0.25rem; padding-top: 0.875rem; border-top: 1px solid var(--lumen-border); }
::part(phone) { font-variant-numeric: tabular-nums; }
::part(error) { padding-left: 0.625rem; border-left: 3px solid var(--lumen-danger); font-weight: 500; }

@media (max-width: 48rem) {
  .workspace { grid-template-columns: 1fr; }
  [data-lumen-nav] { border-right: 0; border-bottom: 1px solid var(--lumen-border); }
  [data-lumen-header] [data-lumen-banner] { display: none; }
}